Geek Answers Handbook

Why does my background image disappear with the float: left?

I want to create a navigation bar with images at each end to make it clean.

So, I created the HTML and CSS below and it did a great job. My menu items are on the ul / li list.

When I style the list to put all the items on one line, the images at the ends disappear. What's up with that? How to fix it?

Criminal: float: left; below.

--- test.html ---

<html> <head> <link rel="stylesheet" href="test.css" type="text/css"> </head> <body> <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></div> </div> </div> </body> </html>

--- test.CSS ---

 #container #header-usernav { background: url('http://www.webcredible.co.uk/i/bg-i-resources.gif'); height: 28px; background-repeat: repeat; } #container #header-usernav-leftside { background: url('http://www.webcredible.co.uk/i/nav-lh.gif'); background-position: top left; background-repeat: no-repeat; } #container #header-usernav-rightside { background: url('http://www.webcredible.co.uk/i/nav-rh.gif'); background-position: top right; background-repeat: no-repeat; } #container #header-usernav ul { list-style: none; padding: 0; margin: 0; margin-left: 10px; } #container #header-usernav li { float: left; padding: 0; margin: 0 0.2em; }

Images are different, so html / css can be copied to test it.

What a deal? What am I doing wrong?

+6
html css background-image menubar
source share
4 answers

I would recommend adding overflow: hidden; (and increase: 1; maintain browser compatibility for IE6) in the div container, and not add a div div. Clear adds bloat to the 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. }
+7
source share

If only floating point children, your outer container will return a height of 0px. So you can put the following immediately after the floating 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>
+5
source share

This is because your divs do not have height. You can add an empty div with clear: both right after your UL. Or you can add these styles to UL

 width: 100%; overflow: auto;

See this for an explanation.

+2
source share

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

+1
source share

More articles:


All Articles