CODEWITHSUNDEEP
csshtml
GilloD
GilloD

Reputation: 571

My wrapper class isn't "holding" anything

I've got a pretty simple little bit of code. It goes like this:

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Home Index Test</title>
    <link rel="stylesheet" type="text/css" href="reset.css" media="all">
    <link rel="stylesheet" type="text/css" href="styles.css" media="all">

<!--    <script type="text/javascript" src="view.js"></script> -->
</head>
<body>

<div id="wrapper">
    wrapper
    <div id="header">
        <div id="logo">
               <img src="kimchi_img/bibi_logo.jpg">
        </div>

        <div id="login_menu">
            <p>About  Contact | Sign In  Register </p>
        </div>
    </div>
</div>

</body>
</html>

Easy, right? A wrapper class to bundle everything up, a header chunk that holds a logo and a menu. But when I peer at it in Firebug, it acts like the wrapper class isn't holding anything. I know that in Firefox a div element has to contain something in order to show up. So I tried a little test—I put the word "wrapper" inside the wrapper class like you see above. Well, now it shows up, but it acts like "wrapper" is only a single line long. I feel like I've missed an important step in the process. Here's the relevant CSS:

#wrapper {
    clear:both;
    margin:0 auto;
    padding:0;
    width:960px;
}

#header{
    width:960px;
}

#logo{
    float:left;
    width: 380px;   
}

#login_menu{
    float:left;
    text-align: right;
    width:580px;
}

I've also got a reset.css purring in the back, but it didn't clear it up.

Upvotes: 3

Views: 1052

Answers (2)

Jens
Jens

Reputation: 25563

Another solution would be to add an empty div with

style="clear:both;"

at the bottom of the wrapper.

Upvotes: 1

J&#248;rn Schou-Rode
J&#248;rn Schou-Rode

Reputation: 38346

Whenever you have a container that holding floated elements, the container will collapse unless you specify an explicit overflow for the container. Add this to either #wrapper or #header:

overflow: hidden;

Now this will (of course) fail in IE6. To get around this bug, I usually add the following to rules:

-height: 1px;
-overflow: auto;

Here, I use the - hack to target IE6, but if you prefer not using hacks, simply move these two properties (without the hyphens) to a seperate stylesheet and link it by conditional comments.

Upvotes: 3

Related Questions