creating a table in a div using css?

Im trying to create a table with one row to be at the top of my middle column pretty much aligned to the top of the middle column div with no padding or margin, how can i go about this and removing the space above this, here is my code for my columns:

CSS


* { font-family: verdana, tahoma, helvetica, geneva, sans-serif; font-size: 11px; color: #000; }

.column-in {
 margin: 0; padding: 10px;
}

#container {
 width: 590px;
 padding: 0;
 display: table;
}

#header {
 width: 100%;
 padding: 4px;
 background: #cccccc;
 display: table;
}

#row {
 display: table-row;
}

#left, #right {
 width: 155px;
 background: #dedfdf;
 display: table-cell;
}

#middle {
 width: 350px;
 background: #f7f7f7;
 display: table-cell;
}

/* IE ONLY */
* html #container {
}
* html #row {
}
* html #left {
 float:left;
}
* html #right {
 float:right;
}
* html #middle {
 float: left;
}

HTML


<body>

 <div id="container">
 <div id="row">

 <div id="left">
 <div class="column-in">
 left
 </div>
 </div>

 <div id="middle">
 <div id="header">&nbsp;&nbsp;&nbsp;> <strong>home page</strong></div>
 <div class="column-in">
 middle
 </div>
 </div>

 <div id="right">
 <div class="column-in">
 right
 </div>
 </div>

 </div>
 </div>

* { margin: 0; font-family: verdana, tahoma, helvetica, geneva, sans-serif; font-size: 11px; color: #000; } .column-in { margin: 0; padding: 5px; } #container { width: 590px; padding: 0; display: table; } #header { width: 100%; padding: 5px; background: #cccccc; display: table; } #row { display: table-row; } #left, #right { width: 155px; background: #dedfdf; display: table-cell; } #middle { width: 350px; background: #f7f7f7; display: table-cell; } /* IE ONLY */ * html #container { } * html #row { } * html #left { float:left; } * html #right { float:right; } * html #middle { float: left; }

<div id="container"> <div id="row"> <div id="left"> <div class="column-in"> left </div> </div> <div id="middle"> <div id="header">    > <strong>home page</strong></div> <div class="column-in"> middle </div> </div> <div id="right"> <div class="column-in"> right </div> </div> </div> </div>

creating a table in a div using css?

hwnd

hwnd

tedster

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week