#1
  1. No Profile Picture

    Join Date
    Jan 2002
    Location
    Pekin, IL
    Posts
    4
    Rep Power
    0

    CSS: Two-Columns


    Greetings,

    I've been angrily been trying to get a two-column website using css instead of tables. There are many examples out there, but they do not suffice for what I need.
    I need the two columns to be static instead of using margins and a float.

    #mainbody {
    margin:0px 0px 0px 150px;
    padding:0px;
    }

    #leftmenu {
    position: static;
    align: top;
    top:40px;
    left:0px;
    width:125px;
    padding:20px;
    background-color:#eee;
    border:1px dashed #999;
    line-height:auto;
    }

    This is what I'm working with. The problem is that the "mainbody" appears below the left menu when I need them side by side.

    Any Ideas???

    Thanks in advance.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2002
    Location
    Inside the GNU/Hurd kernel
    Posts
    492
    Rep Power
    13
    "position: static means that the HTML element is positioned by the natural flow and that this position cannot be changed. I gave the paragraph below a top and left declaration, these should be ignored."

    I dont think that Static is what you should be using for Position.
  4. #3
  5. No Profile Picture

    Join Date
    Jan 2002
    Location
    Pekin, IL
    Posts
    4
    Rep Power
    0
    I omitted "position:static;"

    Is there any alternative of "<tr valign="top">" in CSS???
  6. #4
  7. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">

    #container {
    position: relative;
    top: 40px;
    }

    #leftmenu {
    position: relative;
    width: 125px;
    padding: 20px;
    background-color: #eee;
    border: 1px dashed #999;
    line-height: auto;
    }

    #mainbody {
    position: absolute;
    top: 0px;
    margin: 0px 0px 0px 150px;
    padding: 0px;
    }

    </style>
    </head>
    <body>
    <div id="container">
    <div id="leftmenu"></div>
    <div id="mainbody">
    blah blah blah blah blah blah blah blah blah blah blah<br>
    blah blah blah blah blah blah blah blah blah blah blah<br>
    blah blah blah blah blah blah blah blah blah blah blah
    </div>
    </div>
    </body>
    </html>
  8. #5
  9. No Profile Picture

    Join Date
    Jan 2002
    Location
    Pekin, IL
    Posts
    4
    Rep Power
    0
    I used your example, but have a few questions:

    How could I get the menu to be as high as the mainbody???

    How can I place a footer below the container??? I tried just using another div, but it didn't show unless I put it in the container. Then it shows under the menu.

    Thank you
  10. #6
  11. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Kinda like that old one: how do I get a table column to bottom-justify? Still haven't found a satisfactory answer; I've resorted to scripting instead, on occasion:


    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">

    #container {
    position: relative;
    top: 20px;
    width: 98%;
    }

    #leftmenu {
    position: relative;
    width: 125px;
    float: left;
    background-color: #eee;
    border: 1px dashed #999;
    line-height: auto;
    }

    #mainbody {
    position: relative;
    float: right;
    font: 200 12px arial;
    padding: 8px;
    background: #d8d8d8;
    }

    #footer {
    width: 100%;
    height: 40px;
    font: 200 10px arial;
    text-indent: 4px;
    margin-bottom: 20px;
    clear: all;
    border: 1px black solid;
    background: silver;
    }

    </style>

    <script type="text/javascript" language="javascript">

    function redo() {
    document.getElementById('leftmenu').style.height =
    document.getElementById('mainbody').offsetHeight + 'px';
    }

    onload = redo;
    onresize = redo;

    </script>
    </head>
    <body>
    <div id="container">
    <div id="leftmenu"></div>
    <div id="mainbody">
    <script type="text/javascript" language="javascript">
    for (var i=0;i<400;i++) document.write('mainbody ');
    </script>
    </div>
    <div id="footer">footer</div>
    </div>
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo