Question

Allow me first to mentionne that I know how to adjust height in normal scenarios. Nevertheless I am confronted to something tricky for me right now, and I did not found solutions in other posts.

I have a div called “header” taking the full width of the page.
Inside that div there is a div called “wrapper”. It is centered using margin.
Inside that wrapper there is a logo floating on the left and a menu floating on the right.
The first two div (header and wrapper) are suppose to auto adjust their heights according to the content (logo and menu). To do this I added a “clearer” div after my floating divs. It is working fine except when i put some padding to the li elements of my menu. In that case the div do not adjust. See the blue li in the fiddle here below. Hope to be clear and hope someone can help. Thank you.

FIDDLE : http://jsfiddle.net/Gynft/

HTML :

  <div id="header">
        <div id="wrapper">
            <div id="logo">
                [ logo ]
            </div>
            <ul id="menu">
                <li><a href="" class="">AGENDA</a></li>
                <li><a href="" class="">MESSAGERIE</a></li>
                <li><a href="" class="">COMMUNAUTEE</a></li>
                <li><a href="" class="">DECONNEXION</a></li>
            </ul>
            <div class="clearer"></div>
        </div>    
    </div>​

CSS :

body {
font-family:arial;
font-size:10px;
}

.clearer {
clear:both;
}

#header{
background:yellow;

}

#wrapper {
background:green;
width:560px;
margin:20px auto;
}

#logo {
background:purple;
float:left;
}

#menu {
background:orange;
float:right;
}

#menu li {
display:inline;
padding:5px 10px;
background:blue;
}

Answer 1

I can’t say for sure why exactly this is fixing your problem, but changing the blue li’s display to inline-block instead of just inline seems to work!