takmais
06-15-2007, 06:17 AM
Hi again. And heres another 2 column layout questions. One thats been bugging me for some time now. Typically when I do a basic web page with:
<div id="Header"></div>
<div id="Content">
<div id="Left"></div>
<div id="Right"></div>
</div>
<div id="Footer"></div>
To get a 2 column layout, i'll float the #Left div left and the #Right div right. I notice however that this requires a cleared element to come directly after the floats. So i tried something different (i know its been done before). Instead i put my #Right column before the #Left in my html and only put a float right on the #Right column. It works well in every browser i've tested in and it does NOT require an element to clear it. My question is, which if any, is the prefered way of doing this? It seems that this method of floating is more "true" to the way floats are supposed to work with say, an image that one wishes to float to the right of some block of text. the image comes first, gets the right float and the text (which appears second in the code) happily stays to the left. The only issue i can see with this method for a 2 column layout is that if you absolutly must have your left column content appear first in your code (perhaps a screen reader or no css enabled?) then this wont work. what are everyones thoughts?
<div id="Header"></div>
<div id="Content">
<div id="Left"></div>
<div id="Right"></div>
</div>
<div id="Footer"></div>
To get a 2 column layout, i'll float the #Left div left and the #Right div right. I notice however that this requires a cleared element to come directly after the floats. So i tried something different (i know its been done before). Instead i put my #Right column before the #Left in my html and only put a float right on the #Right column. It works well in every browser i've tested in and it does NOT require an element to clear it. My question is, which if any, is the prefered way of doing this? It seems that this method of floating is more "true" to the way floats are supposed to work with say, an image that one wishes to float to the right of some block of text. the image comes first, gets the right float and the text (which appears second in the code) happily stays to the left. The only issue i can see with this method for a 2 column layout is that if you absolutly must have your left column content appear first in your code (perhaps a screen reader or no css enabled?) then this wont work. what are everyones thoughts?