homepage Welcome to WebmasterWorld Guest from 54.197.110.151
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
creating a table in a div using css?
hwnd



 
Msg#: 4284264 posted 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



 
Msg#: 4284264 posted 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

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



 
Msg#: 4284264 posted 7:16 pm on Mar 19, 2011 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved