ansaurus

Question

Why do my image background disappear on float: left?

Answer 1

+2 A:

With only floated children, your outter container will return a height of 0px. As such, you can place the following immediately after the floated element(s):

<div class="clear"></div>

And add the following rules:

.clear { clear:both; }

For example:

<div id="container">
    <div id="header-usernav" class="span-6 last large">
        <div id="header-usernav-leftside">
          <div id="header-usernav-rightside">
            <ul>
                <li>Register</li>
                <li>Signin</li>
                <li>Signout</li>
            </ul>
            <div class="clear"></div>
          </div>
        </div>
    </div>
</div>

Jonathan Sampson 2010-01-14 04:27:49

This does not seem to work in Safari and Firefox on Mac OS. http://jsbin.com/ikige. The clearing div must be immediately after the UL

Chetan Sastry 2010-01-14 04:40:29

Noted, and corrected. Thank you Chetan.

Jonathan Sampson 2010-01-14 05:06:19

Whilst this technique works, most people would use some variant of clearfix these days, as it doesn't require adding extra markup - see Chetan or Sasha's anwsers.

Sam Murray-Sutton 2010-01-14 09:18:03

Answer 2

+2 A:

It's happening because your divs have no height. You can add an empty div with clear: both immediately after your UL. Or you can add these styles to UL

width: 100%;
overflow: auto;

See this for an explanation.

Chetan Sastry 2010-01-14 04:29:00

Answer 3

A:

Add a height: 28px; to your ul in your css. Jonathan and Chetan have already given a very good explanation of why this works, but to reiterate, parents of floated elements are not affected by the height of their floated children.

Sean Vieira 2010-01-14 04:30:36

Nice explanation, thanks!

Mike 2010-01-14 17:50:52

Answer 4

+1 A:

I'd recommend adding overflow:hidden; (and zoom: 1; to maintain cross browser compatability for IE6) to the container div rather than adding a clearing div. Clear adds bloat to your source code.

#container #header-usernav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 10px;
    overflow: hidden;
    zoom: 1;
    height: 28px; /* This is needed to ensure that the height of the rounded corners matches up with the rest of the bg.
}

Sasha 2010-01-14 04:35:32

ansaurus

tags:

views:

answers:

Why do my image background disappear on float: left?

related questions