Forum Moderators: not2easy
I have three divs (headbanner, leftcontent and centercontent). I want the headbanner up top and the leftcontent and centercontent to line up across the page below it. The site displays exactly how I want it to in high screen resolutions and when the browser window is fully expanded. But when the browser window is not fully expanded, the "centercontent" is too big to display and gets pushed down below "leftcontent." I would much prefer a horizontal scroll bar to appear and "centercontent" to display alongside "leftcontent" as usual. I've had it working in Firefox and Internet Explorer before but do not know what I did and now it doesn't work anymore!
Please take a look at my site, [thefeaturedtable.com...] and help me with this. Thank you so much.
One way to get your desired result is to not float your elements at all, but position your #leftcontent DIV absolutely (which takes it out of the flow of the page) on the left side of the screen of width say 200px. And let your #centercontent DIV flow normally, but give it a large left margin (say 210px) to allow room for your #leftcontent DIV (otherwise your center DIV will appear underneath your left DIV!). This will avoid the center DIV jumping down to below your left DIV, since they are no longer floated.
eg.
#leftcontent {
position: absolute;
top: 50px;
left: 10px;
width: 200px;
height: 500px;
} #centercontent {
margin-left: 210px; /* Allow for #leftcontent */
}
... you may be able to keep some of your current rules, but remove the
float:left;rules. The values given here are just to show the idea. This is effectively a fluid two-column layout, the left column is fixed, but the center would stretch to fill the available space (if you let it).
Hope that helps.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>New Document</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
background:gray;
}
.left
{
width:15%;
float:left;
}
h2
{
background:black;
color:Green;
}
.content
{
background:blue;
border:solid 5px black;
height:200px;
float:left;
width:70%;/*set it to suit you*/
margin-top:10px;/*margin-top*/
}
ul
{
margin-left:25px;/*to make the bullets visible*/
margin-top:10px;/* margin-top to allign with content section*/
}
</style>
</head>
<body>
<h2>here goes the header</h2>
<div class="left">
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="content">text text text text text text text text text text text text text text
text text text text text text text text text text text text text text
text text text text text text text text text text text text text text
text text text text text text text text text text text text text text
text text text text text text text text text text text text text text
text text text text text text text text text text text text text text
text text text text text text text text text text text text text text
text text text text text text text text text text text text text text
text text text text text text text text text text text text text text
text text text text text text text text text text text text text text
</div>
</body>
</html>
