Forum Moderators: not2easy

Message Too Old, No Replies

Stacking Floated DIVs

         

pab1953

1:41 pm on Sep 20, 2010 (gmt 0)

10+ Year Member



Got a basic page design: header, footer, main content 600px wide on left and a 300px-wide right sidebar. Sidebar contains DIVs with ad code, graphics, search forms.

How do I keep these sidebar boxes neatly stacked one on top of the other without having to rely on the main content area to keep them there?

When the main content box is shorter than the right sidebar, the boxes fly under and over to the left. I've tried applying right floats, but that doesn't seem to work either.

Use a table? Other ideas?

Thanks.

enigma1

12:50 pm on Sep 29, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I believe you should check your outer divs or body or the widths should not overflow, here is an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>test page</title>
<style type="text/css">
body {
font: normal 12px Arial, Verdana, sans-serif;
width: 900px;
margin: 0px auto;
}
</style>
</head>
<body>
<div>
<div style="float: left; width: 600px; background: #FFE;">
<div><h1>HEADER</h1></div>
<div>Body Text</div>
</div>
<div style="float: right; width: 300px; background: #EFE;">
<div><h2>SIDEBAR</h2></div>
<div><a href="#">Box1</a></div>
<div>Box2</div>
<div>Box3</div>
</div>
</div>
</body>
</html>

The sidebar won't wrap.