CODEWITHSUNDEEP
css
Marc
Marc

Reputation: 9527

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

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

Upvotes: 2

Views: 2069

Answers (4)

Nikit Barochiya
Nikit Barochiya

Reputation: 1091

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <style>
            body{
                background:#ededed;
                margin:0 auto;
            }
            .main{
                width:720px;
                border:1px solid red;
                padding:5px;
            }
            .menu-item {
            padding:0;
            margin:0;
            width: 100%;
            border-bottom: 0;
            }
            .menu-item li{
                display: table-cell;
                width: 1%;
                float: none;
                border:1px solid green;
                margin:2px;
                padding:10px;
                text-align:center;
            }
        </style>
    </head>
    <body>
       <div class="main">
                <ul class="menu-item">
                    <li><a href="#">menu item 1</a></li>
                    <li><a href="#">menu item 2</a></li>
                    <li><a href="#">menu item 3</a></li>
                    <li><a href="#">menu item 4</a></li>
                    <li><a href="#">menu item 5</a></li>
                </ul>
       </div>
    </body>
</html>

Upvotes: 0

Shailender Arora
Shailender Arora

Reputation: 7778

Hey Marc its simple you can get your desired results throught : overflow:hidden;

its because you didn't clear your parent div and you have used floating in your child div so i have cleared your parent div with overflow:hidden; and now its working fine as per your requirement.

And i hope you are looking like this........

CSS

#header, #wrapper {
overflow:hidden;
}

#header{
background:yellow;
}

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

DEMO

Upvotes: 0

Gopikrishna
Gopikrishna

Reputation: 857

Try this: 

#wrapper {
     background: none repeat scroll 0 0 green;
     margin: 20px auto; overflow: hidden;
     width: 560px;
}

Upvotes: 0

Stephan Muller
Stephan Muller

Reputation: 27600

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!

Upvotes: 2

Related Questions