Forum Moderators: not2easy
Example:
_________________
¦:::::::::::::::¦
¦---------------¦
¦::¦::::::::::::¦
¦::¦::::::::::::¦
¦::¦::::::::::::¦
¦::¦::::::::::::¦
¦::¦____________¦
¦_______________¦When I put the navigation bar and body content next to each other using a float, it display like it should when the browser is big enough, however when I shrink it (make the width smaller), the body content drops below the navigation bar instead of displaying in a line. I can't seem to figure out how to fix this.
Here is my CSS code:
body {
text-align: left;
margin: 0px 0px 0px 0px;
}
#frame {
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
#header {
height: 44px;
padding-left: 5px;
}
#topnavigation {
background: #000066;
height: 20px;
}
#bodycontainer {}
#leftnavigation {
float: left;
width: 180px;
}
#pagecontent {
float: left;
padding: 3px 3px 3px 3px;
width: 800px;
}
#clear {
clear: both;
display: block;
height: 0px;
visibility: hidden;
}
#footer {
clear: both;
}
And here is the code for my page:
<body>
<div id="frame">
<div id="header"></div>
<div id="topnavigation"></div>
<div id="bodycontainer">
<div id="leftnavigation"></div>
<div id="pagecontent"></div>
<div id="clear"> </div>
</div>
<div id="footer"></div>
</div>
</body>
Any help is greatly appreciated! Thanks :)
[edited by: SuzyUK at 2:29 pm (utc) on May 9, 2008]
[edit reason] fixed formatting [/edit]
#pagecontent {
/*float: left;*/
padding: 3px 3px 3px 3px;
width: 800px;
}
Remove the float on #pagecontent and let it flow naturally. Seemed to work here. Welcome aboard!
