Sent by Big John on 9 December 2002 03:03
Michael Ryznar wrote:
> 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?
Yup. You may also 'oppose' them via left and right floating, respectively,
or float just the first (left) col, and allow the right col to remain
'static', producing a similar (but not identical) effect. Dual floats
require certain widths to properly display as side-by-side cols.
> 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.
Here's the lowdown on flow structure:
<lecture class="basic" id="youaskedforit">
The term 'block level' means that the element will always stretch the full
width of its container, unless constrained by its own margins. Therefore,
a block level element can never be side-by-side to another element within
the same container element. A float seems to do this, but actually the
float covers part of any following 'static' block element.
Conversely, 'inline level' invokes a very different rendering method. An
inline element generates a 'line box', which always stretches the width
of the container, unless a float gets in the way. Then the line box gets
shortened so as not to be covered by said float. Within the line box,
inline elements will display horizontally until the available space is
used up, then will wrap to the next line box. Each line box is as tall
as the tallest inline element in that box. Eric Meyer has an in-depth
explaination of 'inline' here:
http://www.meyerweb.com/eric/css/inline-format.html
Floats are by definition 'block', and their behavior is similar to
inline elements, but there are some differences. It's rumored that
css-3 will have 'block-inline', which will presumably make block
boxes display just like inline boxes do, except with block level
features.
Note: If a block element is partially covered by a float, and has
no border or background, then the shortened line boxes within the
block element may make it appear that the block element is not
covered by the float, but this is an illusion.
</lecture>
> 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.
Each AP element is on its own level, and so never interacts with
any other elements except to cover or be covered by them. However,
omitting 'top' (for instance) will cause the browser to assign the
upper edge of the AP element to the vertical position it would have
if it were 'static'. The same applies to 'left'. But otherwise, the
AP element is still on its own level as before, and does not
participate in the 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).
Huzzah! :-)
> 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?
No major ones that I know of. Browser variances may force tweaking of
the percentages used. Also, if one of the floated cols happens to
contain an element wider than the col then IE will enlarge the col,
causing unsightly float 'wrapping'. In fact, unintended float wrapping
is a major source of grief to many new css coders, and is not limited
to IE.
> 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.
Now you know that the flow can determine the starting position of
an AP element (by omitting 'left' and/or 'top').
> 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?
Well, 'float' is pretty good as a layout tool, and it would be even
better if IE properly implemented it. But so long as there is no
('width' or 'height' defined) static element next to a float,
then IE will behave more or less according to the specs.
(I'm working on 'correcting' that)
HTH
Big John
PS--Be sure to address replies to the new list:
"css-discuss" [EMAIL-REMOVED]>
=====
"What the world needs is a good bug ring"--Big John
<http://users.rraz.net/mc_on_the_rocks/testpage/pie.html>
__________________________________________________
Do you Yahoo!?
Yahoo! Mail Plus - Powerful. Affordable. Sign up now.
http://mailplus.yahoo.com
