please help me convert tables to CSS [Archive]

jasonc310771

02-22-2008, 08:50 PM

i have this last piece of code to convert, please can someone tell me the correct way to code this in CSS.

thank you

#index-container {
border: 1px solid #fff;
background: #507bcd;
}

#index-content {
margin: 8px;
}

<table width="319" align="center" style="border-collapse:collapse;">
<tr>
<td width="311" height="126" valign="top" bgcolor="#000000">
<table width="100%" cellpadding="8" style="border-collapse:collapse;">
<tr>
<td valign="top">
<div align="center" id="index-container">
<div>a</div>
</div>
</td>
<td rowspan="3" valign="top" nowrap>b</td>
</tr>
</table>
</td>
</tr>
</table>

_Aerospace_Eng_

02-23-2008, 12:16 AM

Here you go, IE6 has a 3px margin bug that can be fixed. This is why I used conditional comments (http://quirksmode.org/css/condcom.html).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#container {
width:303px;
padding:8px;
background:#000;
margin:auto;
}
#side {
border:1px solid #FFF;
background:#507bcd;
float:left;
width:136px;
text-align:center;
padding:4px
}
#main {
margin-left:150px;
color:#FFF;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
</style>

</head>
<body>
<div id="container" class="clearfix">
<div id="side">a</div>
<div id="main">b</div>
</div>
</body>
</html>

You also need to clear any floats. I've done this by using the fix at http://www.positioniseverything.net/easyclearing.html