On Aug 16, 2005, at 9:45 PM, Janelle Clemens wrote:
Thanks Ben. Unfortunately it is not for tabular data but page
layout. But
let me clarify that. The main template (topnav, sidenav, footer)
is in a
tabless format and validated. The content area will have a 2 row,
3 column
layout. Each cell will contain content, like highlights or list of
products, but not relate to eachother in a tabular fashion.
However each
cell has a bottom border that need to match up so if one cell
expands in
height I need the rest to expand at the same rate. Only a table
can give
this or display: table-cell.
I think your previous training with tables has taught you to look at
things on a page, instead of things being properties of the content.
For example:
- you see that the bottom borders of two cells in one row need to
line up on the page
- I see that there are two equally important content areas which are
themselves related; I need to illustrate these relationships by
placing the content areas side by side, and making them visually take
up the same space as each other.
Coding XHTML+CSS is much easier when you look at the semantics first.
They share a bottom border. Why? What does this mean? It means they
are a group.
<style type="text/css">
div.blockContent {
float:left;
width:100%;
border-bottom:2px solid #000;
}
div.blockContent div {
float:left;
width:50%;
}
</style>
<div id="primaryContent" class="blockContent">
<div>blah blah blah</div>
<div>blah blah blah blah blah blah blah blah blah blah blah
blah</div>
</div><!-- /primaryContent -->
<div id="secondaryContent" class="blockContent">
<div>blah blah blah blah blah blah blah blah blah blah blah
blah</div>
<div>blah blah blah</div>
</div><!-- /secondaryContent -->
Notice: the borders matching up on the page indicate that the "cells"
are related, and since the border is the relationship, the border
property gets assigned to the element that relates them -- the parent
div.
(The "float:left;" on the parent div is just so that it stretches to
enclose all of the floating children. Since the width is 100%, it has
no other effect.)
--
Ben Curtis : webwright
bivia : a personal web studio
http://www.bivia.com
v: (818) 507-6613
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
