Menu
Ok, I’ve decided to move out of the 90’s and into the new century. I want to totally abandon my <table>’s for layout. I LOVE TABLES. They are so EASY for layout. LOL I can hear the groans.
Groan no more. I’m ready to move on. Over the past decade or so, usually when starting a GUI layout framework from scratch (which is what I’m doing right now), I’ll start by saying to myself, “OK, time to get the job done without tables.” I’ve done this probably a dozen times and I did it this time.
Result? I always abandon the attempt in utter frustration and spend a couple of minutes making it all work in a table. And that’s exactly what happened this time too.
But this time it’s different. This time I’m seeking professional help (err… that’s you guys). Below I’ve pasted in a contrived code example. It uses tables. Can someone please show me how to achieve the same layout with pure CSS (no JavaScript). A requirement is that anything that is currently a DIV, stays a DIV.
If I can get an example of how to do this simple contrived example, I should be able to apply the same ideas to some more complex things I’m doing.
Any help appreciated. Cheers.
[CODE]
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />
<meta http-equiv=”language” content=”en-us” />
<meta http-equiv=”Expires” content=”0″ />
<meta http-equiv=”Cache-Control” content=”no-cache” />
<meta http-equiv=”Pragma” content=”no-cache” />
<style type=”text/css”>
body {
margin: 20px;
padding: 0;
font-family: Arial;
}
.container {
margin: 0;
padding: 20px;
border: 1px solid black;
width: 400px;
}
.container:last-child {
border: 0px 1px 1px 1px solid black;
}
.heading {
font-size: 16px;
font-weight: bold;
}
.smallText {
font-size: 12px;
font-weight: normal;
}
.numbers {
margin: 0px 20px 0px 20px;
}
.iconBox {
width: 20px;
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<div class=”container”>
<table width=”100%” cellpadding=”0″ cellspacing=”0″>
<tr>
<td width=”1%”><div class=”heading”>Aaa</div></td>
<td width=”97%”></td>
<td width=”1%” nowrap>
<div class=”numbers”>(001)</div>
</td>
<td width=”1%” rowspan=”3″ valign=”top”>
<div class=”iconBox”></div>
</td>
</tr>
<tr>
<td width=”100%” colspan=”4″><div><hr></div></td>
</tr>
<tr>
<td width=”100%” colspan=”4″>
<div class=”smallText”>This is a description. It could go on for many lines. It might not go
on at all. This one goes on for a couple of lines.</div>
</td>
</tr>
</table>
</div>
<div class=”container”>
<table width=”100%” cellpadding=”0″ cellspacing=”0″>
<tr>
<td width=”1%”><div class=”heading”>Bbb</div></td>
<td width=”97%”></td>
<td width=”1%” nowrap>
<div class=”numbers”>(002)</div>
</td>
<td width=”1%” rowspan=”3″ valign=”top”>
<div class=”iconBox”></div>
</td>
</tr>
<tr>
<td width=”100%” colspan=”4″><div><hr></div></td>
</tr>
<tr>
<td width=”100%” colspan=”4″>
<div class=”smallText”>Can someone tell me why the last-child selector is not working for this
container?</div>
</td>
</tr>
</table>
</div>
</body>
</html>