Nick Leaton wrote:
> I'm trying to do some layout of some html.
>
> The basic idea is to get six divs laid out into a grid pattern of two
> columns and three rows.
> Each div has a separate id and I want the CSS to determine the layout
> and which column
> and row is used to display the data.
>
> The data can be of varying lengths, not known in advance.
>
> The top of each rows should be aligned to the same level.
>
> This is my first stab, but it doesn't work.
>
In new sites, for forward compatibility reasons, it is best to use a
strict html, strict xhtml, or html5 doctype.
In your example, this,
bottomright {
float:right;
width:50%;
background: Darkorange;
}
should read.
#bottomright {
float:left;
width:50%;
background: red;
}
> Perhaps I need to nest divs, but that seems a little strange to be.
> After all why
> would I need to nest divs which is information about layout, in the
> HTML. Why can't
> I do all the layout in the CSS
>
If you need to hit IE/6, IE/7, and the compliant browsers, equal height
(any column longest) columns using only CSS is a difficult problem to
solve without using numerous nested divisions (at least at present). It
is particularly difficult in the situation you have with three rows,
each of them requiring equal height columns.
Some methods...
<http://www.satzansatz.de/cssd/companions.html>
<http://www.positioniseverything.net/articles/onetruelayout/>
the 2 column version of the below tutorial reference may be your best
bet....
<http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks>
The alternatives to a "pure" CSS would be to create equal height columns
using images (faux columns [1]) or by using javascript [2] [3].
[1] <http://www.alistapart.com/articles/fauxcolumns/>
[2] <http://www.gunlaug.no/tos/moa_11f.html>
[3] <http://www.projectseven.com/tutorials/css/pvii_columns/index.htm>
> Nick
>
Best,
~d
--
http://chelseacreekstudio.com/
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
