Forum Moderators: not2easy
Main Container Div - Fixed width, auto height
Header Div - fixed height, width
Content Container Div - fixed width, auto height
Nav Div - fixed width, auto height, float left
Content Div - fixed width, auto height, float left
Footer Div - fixed width, auto height
What I'm having happen is the nav div and content div are stretching, but the content container div which they are inside of is not stretching along with them.
body {
background-image: url(images/mainbg.gif);
background-repeat: repeat-x;
background-color: #790000;
margin: 0px;
padding: 0px;
font-family: Helvetica, sans-serif, Arial;
font-size: 12px;
color: #333333;
line-height: 15px;
}
#maincontainer {
height: auto;
width: 733px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
}
#header {
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 165px;
width: 733px;
}
#contentcontainer {
background-image: url(images/contentbg.jpg);
background-repeat: repeat-y;
margin-right: auto;
margin-left: auto;
padding-top: 5px;
background-position: left top;
width: 733px;
height: auto;
}
#menu {
background-color: #666666;
float: left;
width: 200px;
margin-left: 25px;
height: auto;
}
#content {
background-color: #CCCCCC;
float: left;
width: 475px;
margin-left: 10px;
height: auto;
}
#footer {
background-image: url(images/footer.gif);
background-repeat: no-repeat;
height: 16px;
width: 733px;
Any help is greatly appreciated!
Thanks,
Jason
Edit: took out links because I noticed it was against TOS.
What I'm having happen is the nav div and content div are stretching, but the content container div which they are inside of is not stretching along with them.
Container boxes with floated children will only stretch to contain them if the container, itself, is floated. Apply a float:left to the container and it'll stretch.
-Jason
