SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with html columns

    I've got three vertical columns on a web page that look pretty good.
    I'd like to put a horizontal box across the top of column 2 and 3, and below columns 2 and 3. Can you help me with this? I appreciate any help. Thanks

    Here's what I have right now:

    Code:
    <table class="tab1">
    <tbody>
    <img src="temp/images/Q1.png" border="0" />
    </tbody>
    </table>
    
    <table class="tab2">
    <tbody>
    Text TEXT text Text TEXT text
    </tbody>
    </table>
    
    <table class="tab3">
    <tbody>
    Text TEXT text Text TEXT text
    </tbody>
    </table>
    </td>
    Code:
    .tab1 {  
    width:260px;  
    float: left;  
    text-align:left;
    margin:0px 0px 0px 50px;
    font-size: 12px;
    }
    
    .tab2 {  
    width:260px;  
    float: left;  
    text-align:left;
    margin:0px 0px 0px 20px;
    font-size: 12px;
    }
    						
    .tab3 {  
    width:260px;  
    float: left;  
    text-align:left;
    margin:0px 0px 0px 20px;
    font-size: 12px;
    }

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    put a horizontal box across the top of column 2 and 3, and below columns 2 and 3
    Hi,
    So you want three columns but you just want the box to extend across columns 2 & 3.

    That can be done without using tables. Just nest col-2 an col-3 in a wrapping div (#inner) and then float it next to col-1.
    That #inner div is just to help with the IE6/7 broken float model. It could be done without it for good browsers.

    From there just nest your top and bottom boxes above and below col-2 & 3.

    Something like this

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
     
    <style type="text/css">
    body {
        margin:0;
        padding:0;
        font: 100%/1.3 arial,helvetica,sans-serif;
    }
    #wrap {
        width:780px;
        margin:0 auto;
    }
    #head {
        width:100%;
        min-height:100px;
        background:#CCC;
    }
    #main { /*wrap floated columns*/
        overflow:hidden;/*contain child floats*/
        width:780px; /*IE6 haslayout*/
        background:orange;
    }
    #inner {
        float: left;
        width:520px;
    }
        #col-1, #col-2, #col-3 {
            float: left;
            width:260px; 
            min-height:200px;
        }
        #col-1 {
            background:orange;
        }
        #col-2 {
            background:lime;
        }
        #col-3 {
            background:cyan;
        }
        .box {
            min-height:80px;
            background:#EEF;    
        }
        .clear {clear:both;}
    #foot {
        width:100%;
        background:#CCC;
    }
    </style>
     
    </head>
    <body>
     
    <div id="wrap">
        <div id="head">Header Stuff</div>
     
        <div id="main">
            <div id="col-1">Column 1</div>
            <div id="inner">
                <div class="box">Col-2,3 top box</div>
                <div id="col-2">Column 2</div>
                <div id="col-3">Column 3</div>
                <div class="box clear">Col-2,3 bottom box</div>
            </div>
        </div>
     
        <div id="foot">Footer Stuff</div>
    </div>
     
    </body>
    </html>

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    That #inner div is just to help with the IE6/7 broken float model. It could be done without it for good browsers.
    Actually I can make it work in IE without the extra div. I just need to float #col-1 outside of the #main div and then float #main also.

    This works in all browsers now with one less div
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
     
    <style type="text/css">
    body {
        margin:0;
        padding:0;
        font: 100%/1.3 arial,helvetica,sans-serif;
    }
    #wrap {
        width:780px;
        margin:0 auto;
        overflow:hidden;/*contain child floats*/
        background:orange;
    }
    #head {
        width:100%;
        min-height:100px;
        background:#CCC;
    }
    #col-1 {
        float: left;
        width:260px; 
        min-height:200px;
        background:orange;
    }
    #main { /*wrap columns #2 and #3*/
        float:right;
        width:520px;
    }
    #col-2, #col-3 {
        float: left;
        width:260px; 
        min-height:200px;
        background:lime;
    }
    #col-3 {
        background:cyan;
    }
    .box {
        clear:left;
        width:520px;
        min-height:80px;
        background:#DDF;    
    }
    #foot {
        clear:both;
        width:100%;
        background:#CCC;
    }
    </style>
     
    </head>
    <body>
     
    <div id="wrap">
        <div id="head">Header Stuff</div>
     
        <div id="col-1">Column 1</div>    
     
        <div id="main">
            <div class="box">Col-2,3 top box</div>
            <div id="col-2">Column 2</div>
            <div id="col-3">Column 3</div>
            <div class="box">Col-2,3 bottom box</div>
        </div>
     
        <div id="foot">Footer Stuff</div>
    </div>
     
    </body>
    </html>


Bookmarks

Posting Permissions

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