Sent by Jukka K. Korpela on 3 February 2005 12:12
On Thu, 3 Feb 2005, Lukasz Grabun wrote:
> Floats are the way to go.
I would say that floats are _a_ way to go. Positioning is another. (The
table properties would be yet another, but they are not sufficiently well
supported.)
Floats and positioning have pros and cons. For example, when using
positioning, you can arrange things so that the order of the <div>
elements in HTML source is immaterial, so you could e.g. put content2
after content3 there if that's more logical in text or speech browsing, in
indexing, and other non-CSS situations. Moreover, there are some bugs in
floating. On the other hand, floats are a bit easier to write.
Anyway, here's a positioning approach. For definiteness I assume that
the squares are to be sized as 5em by 5em.
(Note: You probably want to include some padding into the boxes especially
if they contain text. If you want to draw borders around the boxes,
note that there's nothing corresponding to table cell border collapse
here; instead you need to set borders on different sides of the boxes so
that there will be no double borders between them - unless you want that
of course.)
HTML:
<div class="boxes">
<div id="box1">content 1</div>
<div id="box2">content 2</div>
<div id="box3">content 3</div>
<div id="box4">content 4</div>
</div>
CSS:
..boxes { position: relative;
width: 10em;
height: 10em; }
#box1, #box2, #box3, #box4
{ position: absolute;
width: 5em;
height: 5em;
left: 0;
top: 0; }
#box2, #box4 { left: 5em; }
#box3, #box4 { top: 5em; }
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
