SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot poLka's Avatar
    Join Date
    Apr 2003
    Location
    GF
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    is this cheating?

    i am getting frustrated trying to figure out a decent way to accomplish the following layout:

    header
    2columns
    2columns
    footer

    so i decided to use a table, set to 100% as the structurer for when i need 2 columns... it works exactly how i need it to, but i guess it's cheating, no?

    html
    Code:
    <html>
    <head>
    <title>foo</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <body>
    <div id="topBar">
    topbar
    </div>
    <div id="middleBar">
    middlebar
    </div>
    <div id="contentBar">
    <table width="100%">
    <tr>
    <td width=50%>
    left
    </td>
    <td width=50%>
    right
    </td>
    </tr>
    </table>
    </div>
    <div id="bottomBar">
    bottombar
    </div>
    </body>
    </html>
    css

    Code:
     
    body {
     margin-top: 0px;
     margin-bottom: 0px;
     margin-left: 0px;
     margin-right: 0px;
     padding: 0px 0px 0px 0px;
     background-color: #336699;
     font-family: verdana, sans-serif;
     font-size: 0.7em;
     color: #fff;
    }
    #topBar {
     background-color: #0000AA;
     height: 125px;
    }
    #middleBar {
     background-color: #0000CC;
    }
    #contentBar{
     background-color: #CCCCCC;
    }
    #bottomBar {
     background-color: #000011;
     height: 15px;
    }

  2. #2
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why do you say it's cheating ? it's what is called "transitional layout", a mix of table based layout and CSS. as you become more adept at using DIVs and positioning, you may transition it to a full CSS-P layout...but it's still a valid solution (albeit not a bleeding-edge one).
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You can do something similar with CSS.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {
    margin: 0;
    padding: 0;
    background-color: #336699;
    font-family: verdana, sans-serif;
    font-size: 0.7em;
    color: #fff;
    }
    #topBar {
    background-color: #0000AA;
    height: 125px;
    }
    #middleBar {
    background-color: #0000CC;
    }
    #contentBar{
    background-color: #CCCCCC;
    }
    .right {
    width: 50%;
    float:right;
    }
    #bottomBar {
    background-color: #000011;
    height: 15px;
    }
    </style>
    </head>
    <body>
    <div id="topBar">
    topbar
    </div>
    <div id="middleBar">
    middlebar
    </div>
    <div id="contentBar">
    <div class="right">Right content</div>
    left content
    </div>
    <div id="bottomBar">
    bottombar
    </div>
    </body>
    </html>
    I've taken out the table and added this to your stylesheet:
    Code:
    .right {
    width: 50%;
    float:right;
    }
    Then changed the table code to this:
    Code:
    <div id="contentBar">
    <div class="right">Right content</div>
    left content
    </div>
    It behaves the same as your table (unless you want to borders around it and then it gets more difficult.)

    Hope this helps.

    Paul

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Ignore that last version this one is better. (It works in Ie6, Mozilla 1.2 and Opera 6.03.)

    It just floats two columns left and right inside another container and unlike the other example should remain in two columns irrespective of each columns length (I hope).

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    body {
     margin: 0;
     padding: 0;
     background-color: #336699;
     font-family: verdana, sans-serif;
     font-size: 0.7em;
     color: #fff;
    }
    #topBar {
     background-color: #0000AA;
     height: 125px;
    }
    #middleBar {
     background-color: #0000CC;
    }
    #contentBar {
     
     background-color: #CCCCCC;
    }
    .right {
     float:right;
     width: 49%; 
    }
    .left {
     float:left;
     width:50%;
    }
    #bottomBar {
     background-color: #000011;
     height: 15px;
    }
    .spacer {
     clear:both;
    } 
    </style>
    </head>
    <body>
    <div id="topBar">
    topbar
    </div>
    <div id="middleBar">
    middlebar
    </div>
    <div id="contentBar"> 
      <div class="right">Right contents :</div>
      <div class="left">Left Contents :</div>
      <div class="spacer">&nbsp;</div><!--needed for background colour to show-->
    </div>
    <div id="bottomBar">
    bottombar
    </div>
    </body>
    </html>
    I hope that's more like the result you were after

    Paul

  5. #5
    SitePoint Zealot poLka's Avatar
    Join Date
    Apr 2003
    Location
    GF
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you guys, that's perfect!


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
  •