How to auto adjust wrapper height when padding is applied to inner elements


Tags: css

Problem :

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;
}


Solution :

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!


    CSS Howto..

    How do I use the alignment of one class and the font of another?

    How to get Mouse Out effect in CSS

    How to use CSS in Bootstrap to load a logo in the nav-brand class and have it centred?

    How to animate DOM elements with JavaScript/CSS

    How would you code this: The SO Announcement bar [closed]

    How to get this hover effect with just CSS

    How to override Inline Style CSS?

    How to start css animation on speciefic height of webpage

    How fixed a navigation to the center on scroll?

    How to wrap text using CSS? [duplicate]

    How to sprite body background in CSS

    How To Make CSS Animations Ease Back To Position When No Longer Hovering?

    How to ignore

    CSS rules in wordpress theme?

    how to animate with CSS?

    how to use tinymce content.css in rails

    How can I fix an element to the page that is of a variable distance from the edge of the screen?

    How to identify unused css definitions [closed]

    Menu hover effect - how to reproduce this effect?

    How do I get two adjacent spans to display their text vertically?

    How do I make a certain text style larger?

    css - how to stretch and auto-resize background image

    How erase extra black on drop down menu

    How does one override the JQuery UI styles?

    CSS how to style the “content”/“background” attribute of a custom checkbox tick sign?

    How can i prevent divs from moving while resizing the page

    ExtJS 4.2 How to set grid filter height when header text is wrapped?

    How to only deregister Wordpress stylesheet for non-logged in users?

    How to add padding to 100% div in Bootstrap?

    How to make recessed button in CSS

    how to show text like 2 / 4 “page number / total pages” in css or css3