Force Margin/Space Between List and Floated Image

css3-logo If you’re displaying floated images, you may notice that margins of lists and other block-level elements seem to “collapse”.

And here is what is happening behind the scenes:

css-list-float-02

As you can see, the list is simply ignoring the floated item and stretching across the entire width of the content area. Depending on the design, this may not be a huge deal, but there is an easy way to prevent it from happening. Just apply a width and overflow property to the list element:

.content ul, .content ol { width: auto; overflow: hidden; }

Applying that code, the margin kicks in and we get this:

css-list-float-04

This trick also works on other block-level elements, such as <div>s.

To get the popout <div> to sit next to the floated image — without floating it — we apply the simple fix:

.popout { width: auto; overflow: hidden; }

Perishable Press

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s