Sent by Michael Ryznar on 9 December 2002 01:01
Hello,
What is the best way to position two divs beside each other (horizontally)?
Usually when two divs are placed beside each other they naturally stack
vertically down the page (one on top of the other because divs are block
elements by definition). However, I would like to line up the two divs
horizontally.
I have tried a few tests using the "float" property. I set the two divs to
float: left. This seems to work. The divs line up horizontally. (I clear the
effect by adding a clear: left to the next element). Is this the proper way
to achieve this effect?
The reason I ask, is I was looking at another book which mentions the
"display: block" and the "display: inline" declarations and I thought that
would be the declaration to use in this case but it didn't work. So I think
I am on the right track but I needed some reassurance before I code the
entire section of my web page with floats.
I considered positioning the divs absolutely but that wouldn't work because
I would like the two divs to flow with the rest of the document in the
document flow.
I could use tables to do this but, to stay true to css, I am trying to avoid
the use of tables for layout - (the divs do not contain tabular data).
The second part of my question is, if floats are the way to achieve adjacent
Divs, couldn't one theoretically layout a 3 column web site using 3
containing divs set to float? Or are there pitfalls to this method?
I am 1/4 of the way through reading the book "Cascading Style Sheets:
Separating Content from Presentation" by Briggs, Champeon, Costello and
Patterson (great book by the way) and I see up ahead on the end of chapter 8
some layout solutions using boxes - but all the examples use absolutely
positioned boxes and therefore they wouldn't flow if something was placed
before them in the document order. No mention of using floating divs for the
main structure of a layout seems to be mentioned in the book - as far as I
can see. Is it not a good idea to use floating divs for the main structure
of a layout?
Thank you for any suggestions,
Mike
_______________________________________________
css-discuss [EMAIL-REMOVED]]
http://two.pairlist.net/mailman/listinfo/css-discuss
Sponsored by www.westciv.com - CSS resources | software | learning
