...

View Full Version : trying to get 2 columns to sit side by side, css and html in post



KevinG
07-06-2007, 12:55 PM
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;
}

Donkey
07-06-2007, 01:21 PM
AFAICS That is tabular data so a table should be used. It is only "wrong" when tables are used for positioning.

Jutlander
07-06-2007, 01:28 PM
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?

KevinG
07-06-2007, 03:00 PM
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.

Jutlander
07-06-2007, 03:26 PM
Tables are OK to use as long as it is tabular data as yours. In fact it is the most semantic in this context.

Donkey
07-06-2007, 03:48 PM
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;
}

KevinG
07-06-2007, 04:23 PM
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.

BWiz
07-06-2007, 04:44 PM
You have to set the border to each individual <td>, like this:



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

KevinG
07-06-2007, 05:15 PM
i put it in my external css file and it didnt work

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

BWiz
07-06-2007, 05:25 PM
Do you have the table code already set up? Can you show it please? And the relative CSS.

KevinG
07-06-2007, 05:26 PM
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>

BWiz
07-06-2007, 05:32 PM
#stamptable {
width: 300px;
padding: 15px;
background-color: #D8FCA0;
text-align: center;
margin: 1px;
border:1px solid #FF0000;
}

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum