trying to get 2 columns to sit side by side, css and html in post

Hi everyone, i want to make a 2 column table with 5 rows. but using divs not tables.

i have made it, but i cannot get the two coulmns (stampleft + stampright) to set next to each other, instead one appears under the other.

here is the html:

<ol id="stampleft"><h5>Purchase Price</h5></ol>
<ol id="a"><h3>up to £125,000</h3></ol>
<ol id="b"><h3>£125,001 - £250,000</h3></ol>
<ol id="c"><h3>£250,001 - £500,000</h3></ol>
<ol id="d"><h3>£500,001 or more</h3></ol>

<ol id="stampright"><h5>Rate of Stamp Duty</h5></ol>
<ol id="al"><h3>0%</h3></ol>
<ol id="bl"><h3>1%</h3></ol>
<ol id="cl"><h3>3%</h3></ol>
<ol id="dl"><h3>4%</h3></ol>

the css

#stampleft, #a, #b, #c, #d {
width: 150px;
padding: 10px;
background-color: #D8FCA0;
text-align: center;
margin: 1px;
}
#stampright, #al, #bl, #cl, #dl {
width: 150px;
padding: 10px;
background-color: #D8FCA0;
text-align: center;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 1px;
}

AFAICS That is tabular data so a table should be used. It is only "wrong" when tables are used for positioning.

As Donkey says a table should be used for that.

You state that you want to use divs for this, but I see no divs, only ordered lists?

well i was going for a table free website, and i figured this sort of thing could be done. its the positioning i am having rpoblems with.

Tables are OK to use as long as it is tabular data as yours. In fact it is the most semantic in this context.

If you really wanted to do it in this "cack-handed" way, you need to sort your list coding out, and left float. Also you need to make your widths large enough to contain the text otherwise one list takes up two lines and they go out of step. I got this to work after a fashion but you would be better advised to use a table. I changed your ordered list to unordered.
HTML
<ul id="stampleft">
<li><h5>Purchase Price</h5></li>
<li id="a"><h3>up to £125,000</h3></li>
<li id="b"><h3>£125,001 - £250,000</h3></li>
<li id="c"><h3>£250,001 - £500,000</h3></li>
<li id="d"><h3>£500,001 or more</h3></li>
</ul>

<ul id="stampright">
<li><h5>Rate of Stamp Duty</h5></li>
<li id="al"><h3>0%</h3></li>
<li id="bl"><h3>1%</h3></li>
<li id="cl"><h3>3%</h3></li>
<li id="dl"><h3>4%</h3></li>
</ul>

CSS
*{
margin:0;
padding:0;
border:0;
}


body{
margin:0;
padding:0;
font: normal 67% Arial, Helvetica, Sans-serif;
}
#stampleft, #a, #b, #c, #d {
width:170px;
padding: 10px;
background-color: #D8FCA0;
text-align: center;
margin: 1px;
float:left;

}
#stampright, #al, #bl, #cl, #dl {
width: 130px;
padding: 10px;
background-color: #D8FCA0;
text-align: center;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 1px;
float:left;
}
ul
{
list-style: none;
}

thanks donkey, i made it using tables, but one thing i noticed, i want each table to cell to have a white border. i can do that but not using css as css just puts one border around the outside of the table.

You have to set the border to each individual <td>, like this:


<style type="text/css">
<!--
td { border: 1px solid #fff; }
-->
</style>

i put it in my external css file and it didnt work

td { border: 1px solid #fff; } and i tried - td:1px solid #fff;

Do you have the table code already set up? Can you show it please? And the relative CSS.

Hi BWiz

#stamptable {
width: 300px;
padding: 15px;
background-color: #D8FCA0;
text-align: center;
margin: 1px;
border:thin solid #FF0000;
}

---html

<table id=stamptable>
<tr>
<td><h5>Purchase Price</h5></td>
<td><h5>Rate of Stamp Duty</h5></td>
</tr>
<tr>
<td><h3>up to &pound;125,000</h3></td>
<td><h3>0%</h3></td>
</tr>
<tr>
<td><h3>&pound;125,001 - &pound;250,000</h3></td>
<td><h3>1%</h3></td>
</tr>
<tr>
<td><h3>&pound;250,001 - &pound;500,000</h3></td>
<td><h3>3%</h3></td>
</tr>
<tr>
<td><h3>&pound;500,001 or more</h3></td>
<td><h3>4%</h3></td>
</tr>
</table>

#stamptable {
width: 300px;
padding: 15px;
background-color: #D8FCA0;
text-align: center;
margin: 1px;
border:1px solid #FF0000;
}

#stamptable td { border: 1px solid #fff; }