CODEWITHSUNDEEP
cssbackgroundhtml-listscss-float
Helium87
Helium87

Reputation: 1

Browser window resizing affects the CSS layout

I am trying to create a layout with the header and footer at 100% width while the container has a width of 940px. I have seen an example of this on blogs and news websites. Instead of floating the contained content, it has the appearance of being anchored to the top and bottom of the page.

Also the website I am creating has only a few pages so I've placed the navigation within the header. The navigation is centered by using absolute positioning.

When I shrink the window (in any browser) everything stays in its place except that I see a white background covering the content below the header. I don't know why this is happening but I think the dropdown menu might have caused a problem. Thanks

Here's my CSS code:

body,html,ul,li{
        margin:0;
        padding:0;
        color:#000;
    }

#wrap-head {
        width:100%;
        margin:0 auto;
        background-image:url('header-bg.png');      
    }

#header {
        width: 940px;
        height: 140px;
        max-height:130px;
        position: relative;
        margin-left:auto;
        margin-right:auto;
        padding: 0;
        clear:both;
        background-color: white;
    }

.logo {
    position: absolute;
    top:0;
    left:0;
}   

#nav {
        position:absolute;
        top:48px;
        left:470px;
    }
#nav{
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    /* Clear floats */
    float:left;
    z-index:5;
}

#nav li{
    float:left;
    margin-right:10px;
    position:relative;
}
#nav a{
    display:block;
    padding:6px;
    color:#fff;
    background:#0066ff;
    text-decoration:none;
}
#nav a:hover{
    color:#fff;
    background:#0066ff;
    text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
    background:rgba(255,255,255,0); 
    list-style:none;
    position:absolute;
    left:-9999px; 
}
#nav ul li{
    padding-top:1px; 
    float:none;
    left:0px;
    background:#ccc;
}
#nav ul a{
    white-space:nowrap; 
}
#nav li:hover ul{ 
    left:0; 
}
#nav li:hover a{ 
    background:#0066ff;
    text-decoration:underline;
}
#nav li:hover ul a{ 
    text-decoration:none;
}
#nav li:hover ul li a:hover{ 
    background:#333;
}



/*-- MAIN BODY STYLES --*/
#wrap-body {
    width:100%;
    margin:0 auto;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 0.875em;
    background-color: black;
    overflow:hidden;
    }

    h2 {
        margin:0 0 1em;
    }

    #container {
        width:940px;
        margin:0 auto;
        overflow:hidden;
        background-color: #666666;
        }

    #content {
    float:left;
    width:640px;
      padding:5px 10px;
      background-color:#666666;  
    }
    #sidebar {
        float:right;
        width:260px;
       padding:5px 10px;
        background:#CCC;
    }
    #footer {
        clear:both;
        padding:5px 10px;
        background:#333;
    }
    #footer p {
        margin:0;
        color:#FFF;
        font-family:Verdana, Geneva, sans-serif;
        font-size:12px;
    }
    * html #footer {
        height:1px;
    }
    #footercontent {
        margin-left:auto;
        margin-right: auto;
        width: 940px;
        height:126px;
        padding:0px;
        clear:both; 
    }

Here's the HTML

<body>
    <div id="wrap-head">
        <div id="header">
            <img class="logo" src="logotest.gif" width="280" height="110" />
            <ul id="nav">
                <li>
                    <a href="#" title="Return home">HOME</a>
                </li>
                <li>
                    <a href="#" title="About the IMHS">ABOUT IMHS</a>
                    <ul>
                        <li>
                            <a href="#">Introduction</a>
                        </li>
                        <li>
                            <a href="#">Mission Statement</a>
                        </li>
                        <li>
                            <a href="#">Member Profiles</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#" title="News">NEWS</a>
                </li>
                <li>
                    <a href="#" title="Features">FEATURES</a>
                    <ul>
                        <li>
                            <a href="#">Articles</a>
                        </li>
                        <li>
                            <a href="#">Book Reviews</a>
                        </li>
                        <li>
                            <a href="#">Monthly Feature</a>
                        </li>
                        <li>
                            <a href="#">IMH Schoolhouse</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#" title="News">LINKS</a>
                </li>
            </ul>
        </div>
    </div>
    <!--END OF NAVIGATION-->
    <!--END OF NAVIGATION-->
    <div id="wrap-body">
        <div id="container">
            <div id="content">
                <h2>Column 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                <h3>Consectetuer adipiscing elit</h3>
                <p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            </div>
            <div id="sidebar">
                <h2>Column 2</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
            </div>
        </div>
        <div id="footer">
            <div id="footercontent">
                <p>aaaaa aaaa </p>
            </div>
        </div>
    </div>
</body>

Thanks

Upvotes: 0

Views: 3559

Answers (1)

Shailender Arora
Shailender Arora

Reputation: 7788

you should give the min-width to your body

    body{
            min-width:940px;
}

or see the live demo with your updated code:- http://jsfiddle.net/WnecH/1/

Upvotes: 2

Related Questions