Forum Moderators: not2easy
The vertical divisions are left div (float left, margin right) content div (float left, no margins) right div (float right, no margins). All dimensions selected for their liquid design quality.
The page looks great in FF & IE 1024 and 800.
Are there any inherent disadvantages to this approach compared with using absolute positioning, for example?
Perhaps other people have had more experience (and luck?) with absolute positioning, but I have found it more likely to create odd problems with overlapping and such, especially in older browsers.
I will proceed with the float approach.
Gene
Floats work fine for columns. I use them all the time.
You usually need to put a "break" <div> after the floats, just to ensure that the container is stretched.
To wit:
<div id="main_wrapper">
<div id="container" style="background-color:yellow;border: 1px solid black;padding:4px">
<div id="left_column" style="float:left;width:33%;height:100px;border: 1px solid red">Left Column</div>
<div id="center_column" style="float:left;width:33%;height:100px;border: 1px solid green">Center Column</div>
<div id="right_column" style="float:left;width:33%;height:100px;border: 1px solid blue">Right Column</div>
[red][b]<div id="breaker" style="clear:both"></div>[/b][/red]</div>The only way to get truly robust columnar display is with <table> elements, but they can stretch out your page.
<ducks flying shoe />
<div id="container" style="text-align:center;background-color:yellow;border: 1px solid black;padding: 1px">
<div id="left_column" style="text-align:left;width:30%;float:left;height:100px;border: 1px solid red">Left Column</div>
<div id="right_column" style="text-align:left;float:right;width:30%;height:100px;border: 1px solid blue">Right Column</div>
<div id="center_column" style="text-align:left;width:30%;height:100px;border: 1px solid green;margin-left:auto;margin-right:auto">Center Column</div>
<div id="breaker" style="clear:both"></div>
</div>However, it is still a good idea to have the breaker in there, because the left or right column may be longer than the center, which is the element that stretches the container.
It seems that getting css non-table, multicolumn design to work consistently, as design and content vary, requires a well-stocked tool chest. I thank you for some new tools which I have added to my kit.
A few questions:
When you use the word "stretch" I believe that you are talking about your intuitive knowledge that has come from much trial and error?
In the 2nd example when you talk about the center division
"--which is the element that stretches the container" does this mean that the container is "stretched" if the center division is longest. But if the right or left division are longer than the center division THEN there will be overlap with material below if the container div is not stretched by a breaker division? Have I got it right?
Intuitively speaking when you say more "graceful" about the second example is this limited to mental imagery or does the second example work more reliably, with more precision, etc.?
In the second example should I take the wrapper division as implied? or did you mean to leave this out of the second example?
In any case I have trouble visualizing the function of a wrapper division. It seems like it is a soul without a body? How do you see it functioning?
Do you ever use tables for layout?
I hope that this isn't too many questions?
Thanks again,
gstick
When you use the word "stretch" I believe that you are talking about your intuitive knowledge that has come from much trial and error?
Yup. Heavy on the "error" part.
In the 2nd example when you talk about the center division
"--which is the element that stretches the container" does this mean that the container is "stretched" if the center division is longest. But if the right or left division are longer than the center division THEN there will be overlap with material below if the container div is not stretched by a breaker division? Have I got it right?
Yes, what happens is that a float is constrained by the container's width, left and top positions, but the container behaves as if it has no content. A float does not cause the container to stretch to accommodate the
float.
Intuitively speaking when you say more "graceful" about the second example is this limited to mental imagery or does the second example work more reliably, with more precision, etc.?
It looks better. The columns are more naturally spaced, and you have a bit more freedom to play with them, as they are all pretty much independent of each other. When you do three left floats, then the position of each is dependent upon the position of the previous float.
In the second example should I take the wrapper division as implied? or did you mean to leave this out of the second example?
Oops. Cut and paste error. I apologize.
In any case I have trouble visualizing the function of a wrapper division. It seems like it is a soul without a body? How do you see it functioning?
Well the wrapper is very important. It tells the floats where to go. It does not have to be visible (no border or background), but it needs to contain them. You don't have to stretch it if you don't want to. As long as the next <div> has a clear: in it, then it will not be overlapped by the floats.
Do you ever use tables for layout?
Yes. As a general rule, I avoid it, but <table> elements give a great deal of structure, and they are very robust.
A <div> reacts to its context. It is best for fitting a layout to a browser window, so I try to use <div> elements for flexible layouts. They are also (generally) easier to customize with CSS.
A <table> reacts to its content, so I will use a <table> for layout when the content is not predictable.
I hope that this isn't too many questions?
Nah. Glad you asked. I used to have an instructor that said "The only stupid question is the one you don't ask."
