Welcome to WebmasterWorld Guest from 54.227.5.198

Forum Moderators: incrediBILL

Message Too Old, No Replies

creating a table in a div using css?

     

hwnd

6:21 pm on Mar 19, 2011 (gmt 0)



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>

hwnd

7:01 pm on Mar 19, 2011 (gmt 0)



Nevermind I fixed it.


* { 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">&nbsp;&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>

tedster

7:16 pm on Mar 19, 2011 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Welcome to the forums, hwnd. Good that you found your own answer - thanks for adding it to your original question.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month