All geek questions in one place

My wrapper class does not "hold" anything

I have a pretty simple code. This happens as follows:

<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 for grouping everything, a piece of the header with the logo and menu. But when I look at it in Firebug, it acts like a wrapper class that holds nothing. I know that in Firefox, the div element must contain something to show. So I tried a little test - I put the word "wrapper" inside the wrapper class, as you see above. Well, now it appears, but it acts like a "wrapper", this is just one line. I feel that I have missed an important step in this 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 also have a reset.csspurr in my back, but it hasn't cleared up.

+3
2

, , , , overflow . #wrapper #header:

overflow: hidden;

() IE6. , :

-height: 1px;
-overflow: auto;

- hack IE6, , ( ) .

+3

div

style="clear:both;"

.

+1

Source: https://habr.com/ru/post/1734205/

More articles:


All Articles