Chris
That's true if you look at it from a rigid grid layout point of view. In this case the programs aren't tabular data, additionally if you wanted to represent the 4 programs in another visual format using css only then this wouldn't be possible with a table layout.
My suggestion would be to start off with some div boxes all of the same class then float these left. You can then add the content in each box and avoid classitis (e.g high1, high2). You can the change the box layout by turning floats off (for a PDA for instance).
<div class="highlight"> <!-- content --> </div> <div class="highlight"> <!-- content --> </div> <div class="highlight"> <!-- content --> </div> <div class="highlight"> <!-- content --> </div>
<!-- something here to clear the floats -->
/* now the css */
.highlight
{
float : left;
/ * other selectors */
}
Chris Kennon wrote:
The four programs across have started a chain of DIVS that seem more cumbersome than table cells. How would one recommend recreating this in semantically correct CSS, without the tangled mess of DIVS I've birthed.
"Computers need more Africa in them." -Brian Eno Chris http://ckimedia.com
---CSS SNIPPET--
div#high1, #high2{ border: 1px solid #CDCBD2; width: 140px; margin: 1% 0 0 2%; padding:0;
} .floatRight{ float: right; width: 140px;
} img.high1, .high2{ background-color: #FF6600; margin: 0; padding: 0; } .caption, .desc{ border: 1px solid #CDCBD2; background-color: #CDCBD2; width: 140px; height: auto; margin: 0 0 0 2%; padding:0;
} .desc{ background-color: #FFF;
} .caption p{ margin-left: 10px;
}
------XHTML SNIPPET--
<div id="highlights">
<div id="high1">
<img name="high1" src="" width="140" height="54" alt="evening highlight one" class="high1" />
</div>
<div class="caption">
<p>This is a Picture</P>
</div>
<div class="desc">
<p>This is what the show is about</p>
</div>
<div id="high2">
<img name="high2" src="" width="140" height="54" alt="evening highlight two" class="high2" />
</div>
<div class="caption" >
<p>This is a Picture</P>
</div>
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
