Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts

    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;
    }

  • #2
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    AFAICS That is tabular data so a table should be used. It is only "wrong" when tables are used for positioning.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #3
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    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?
    .
    .

  • #4
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Tables are OK to use as long as it is tabular data as yours. In fact it is the most semantic in this context.
    .
    .

  • #6
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    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
    Code:
    <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
    Code:
    *{
    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;
    }
    Last edited by Donkey; 07-06-2007 at 03:51 PM.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #7
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    You have to set the border to each individual <td>, like this:

    Code:
    <style type="text/css">
    <!--
    td { border: 1px solid #fff; }
    -->
    </style>
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #9
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    i put it in my external css file and it didnt work

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

  • #10
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    Do you have the table code already set up? Can you show it please? And the relative CSS.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #11
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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>

  • #12
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    Code:
    #stamptable {
    width: 300px;
    padding: 15px;
    background-color: #D8FCA0;
    text-align: center;
    margin: 1px;
    border:1px solid #FF0000;
    }
    
    #stamptable td { border: 1px solid #fff; }
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •