CSS three column layout, liquid center, no left-margin! -
I am in favor of CSS based layouts, but this is the one I can not understand. With a table it's oh-so-easy:
& Lt; Td style = "border: 1px solid blue, width: 200px;" Rowspan = "2" & gt; Rights & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td style = "border: 1 px solid fuscia;" & Gt; Additional content & lt; / Td> & Lt; / TR & gt; & Lt; Tr & gt; & Lt; Td style = "border: 1 px solid green;" Callspan = "3" & gt; Footer & lt; / TD & gt; & Lt; / TR & gt; & Lt; / Body & gt; & Lt; Html & gt; Left default is Correct default width Content is liquid Additional stuff sits below Now this important part is: "left" does not exist Again it is easy with tables. Delete the columns and expand the "content". beautiful. I have seen through many examples (and "holy grails") through liquid and table less three column CSS-based layouts, but I have not found anybody who has any kind of margin for the middle column ("content") - Not using the left. Any margin goes on left as a "left" "material" once it is left, just stay in its place. I am just going to switch to the old school table based layout for this problem, hopefully someone has any idea - I do not care much about markup, wrappers and likes, I Just want to know how to solve it with plain CSS. BTW: See how many equal height columns are ...
Cheers
No, please
body {width: 600px; }. Left {float: left; Width: 200px; } .center {float: right; Width: 100%; } .right {float: right; Width: 200px; }
Should leave it. When the remainder is left, the center extends to the full width
Comments
Post a Comment