noob trouble with css

Discussion in 'HTML' started by sdsd, May 11, 2008.

  1. sdsd

    sdsd Guest

    Can anyone please let me know how I can make the "main_left" div
    expand to the remaining space after "main_right" occupies the right
    220px. I have tried different combinations but the "main_left" drops
    down below "main_right".

    Many thanks in advance.
    ......................................................
    <head>
    <style type="text/css">

    /* Main Layout */
    #main {
    width: 95%;
    border: 2px solid #CCC;
    margin: 10px auto 0;
    padding: 10px;
    }
    #main_left {width: 545px; border: 1px solid #ccc;}
    #main_right {width: 220px; border: 1px solid #ccc;}

    /* Floats */
    ..left {float: left;}
    ..right {float: right;}

    </style>
    </head>
    <body>

    <div id="main">
    <div class="left" id="main_left">

    Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus.
    Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam

    </div>
    <div class="right" id="main_right">

    efgh

    </div>
    <div class="clearer">&nbsp;</div>
    </div>


    </body>
    </html>
     
    sdsd, May 11, 2008
    #1
    1. Advertisements

  2. sdsd

    dorayme Guest

    You cannot expect a percentage specified main (in relation to - most
    likely - browser viewport width) to relate well to the px widthed
    "internal" divs. If you use a consistent unit, you will get a better
    result. Best is generally % or em. But here is in px:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Title</title>
    <style type="text/css">

    /* Main Layout */
    #main {
    width: 800px;
    border: 2px solid #CCC;
    margin: 10px auto 0;
    padding: 10px;
    overflow: hidden;
    }
    #main_left {width: 545px; border: 1px solid #ccc;}
    #main_right {width: 220px; border: 1px solid #ccc;}

    /* Floats */
    ..left {float: left;}
    ..right {float: right;}
    </style>
    <title></title>
    </head>
    <body>
    <div id="main">
    <div class="left" id="main_left">
    Aliquam risus justo, mollis in, laoreet a, consectetuer nec,
    risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam
    </div>
    <div class="right" id="main_right">
    efgh
    </div>
    <div class="clearer">
    &nbsp;
    </div>
    </div>
    </body>
    </html>

    I add overflow, in case you want the main to "cover" the floats. You can
    also use a clearing div to achieve this effect (and which works in IE6
    unlike overflow).
     
    dorayme, May 11, 2008
    #2
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.