Forum Moderators: not2easy
My tablular layout has a 100% width x 60px height header, followed underneath by three columns, consisting in width of a 16% sidebar, 62% main content, and a 22% ad section (left to right), then a full width footer at the bottom.
When I reduce the width in MSIE 6 SP1 the columns collapse until they meet a fixed width object, such as a 468px banner, or a non-wrapable word or subdiv, then a horizontal scrollbar forms at the bottom of the browser, and there is no further compression of the data in any columns, and they maintain their vertical alignment no matter how much I reduce the width. No columns ever drop below other columns upon width reduction, and the scrollbar allows a full horizontal view if the browser is made too narrow.
This is what I am trying to duplicate using CSS Divs. I can get the exact look and proportions using css. However, when I test various css layout codes that I have researched, or come up with by experimentation, upon reducing the width of the browser, at a point where the center column has a fixed width object, like a 468px banner, the right-most column drops under the center main column! Then if I keep reducing the width, the main center div drops below the sidebar! I am using position:relative; float:left for the sidebar and main content divs, and position:relative; float:right for the right adbar. BTW: when the right adbar drops it does align to the right, since it is floated right, but I don't want it to drop at all. I want the divs to stop compressing like table data cells do, or to overlap and allow me to use z-index to determine which div should remain fully visible as the width is reduced below the minimum required for a full horizontal dislay.
I would greatly welcome your assistance if you know how to overcome this vertical displacement of horizontally floated divs, using css only. I can provide a link to the css workup page, and the correctly functioning table version, or post my css codes, upon request.
Thanks in advance, Wiz
try this. Note that the right div is nested in the container div, creating the effect of floating. This layout works on ie, but the text in the container runs into the text in the right bar in netscape 4, mozilla, and opera.
To avoid this underrun, don't nest the right div, and change the widths to account for this in the container div. This will only work if you have no fixed width content, however.
This won't handle color differences in columns, for example if you want the left bar to always have the background color all the way down, you'd have to apply that background color to the main container element as well.
The real solution, of course, is to give up on using div tags for this kind of structure, and just use a basic one row 3 celled table for the main cell area, div on top for header, div on bottom for footer. No tweaks required, totally stable, will always work in all cases, super easy to code. So the question is, why not use the easy way? Just because somebody says tag x is for purpose y when it doesn't even work for that purpose - divs just don't do a good job in vertical columns, they are great for horizontal separation, great for positioning items randomly, but they weren't built to relate to each other the way table cells were, there is no real container equivalent to a table in a div structure, that's why this stuff gets so ridiculously convoluted, to me the only reason I try to do vertical div layouts is just for the challenge, bragging rights, and so on, it's never a good practical solution to replacing a simple table layout.
<html>
<head>
<title></title>
<style>
.container {
height:100%;
position:relative;
background-color:black;
}
.left {
position:absolute;
top:0px;
left:0px;
width:16%;
background-color:blue;
height: 200px;
}
.content {
position:absolute;
top:0px;
left:16%;
width:84%;
height:300px;
background-color:yellow;
}
.right {
position:absolute;
top:0px;
left:78%;
width:22%;
height:220px;
background-color:green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="content"><div class="right"></div></div>
</div>
</body>
</html>
Wiz
Out of curiousity, I spent yesterday working on column div layouts, and concluded that trying to create layouts with divs is so absurdly complex and unstable, and so totally limited, that it is one of the more extreme exercises in futility, although I have done this on one of my sites as a learning exercise, but I have also come to regret having done that.
This especially applies if you are using separate colors for each column and want all the columns to go down the page no matter how long any one individual column is (with divs, you can fake this, but only assuming always that one of the columns is the longest always)
For example, if you have a container div at 100% width, then two column divs, both at 50% width, floated left, but you add a 1 or 2 pixel border to the first div, what happens in mozilla and opera 7 is that the second div gets shoved down below the first div since the width of the two is then 50% + 50% + 1 or 2 pixels, which means there isn't enough room for it. It works fine in IE and Opera 6, which don't correctly implement the box model for borders and margins, in other words, a total pain for less than zero gain.
Obviously you can insert a div into the first div and then put the border on that one, but then you are making a bunch of nested divs to achieve what should be a totally simple effect, which sort of defeats the whole point of simple layout that is supposed to be the payoff of using divs.
Whereas if you have two table cells, a border on the first, no floats needed, no second container to handle the border, it just works.
I also tried doing a full site layout with div columns, which was equally ridiculous in terms of lost control and functionality, for example, if you set a left nav div at 20% width, a content container div at 80%, then insert into the content container a fixed width item of say 500 px, when you shrink the window, the content div pushes into the left div on some browsers, totally ridiculous.
I'm not sure where this near religious attachment to making all div layouts came from, I've played around with them a lot, but to get even a remotely close resemblance to the power and stability of a table cell layout requires such extreme tweaks to the divs, resulting in a total failure to display correctly on older browsers, along with a loss of flexibility in page design.
On of my bigger regrets is that I made one of my main sites using all positioned divs, sized dynamically to fit the browser window, but this layout is such a pain to work with I wish I had just made a nice stable basic table cell with div layout, it would have worked better in all ways, and been much cleaner code wise, and much easier to alter and modify on a structural level.
