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. Advertising

  2. sdsd

    dorayme Guest

    In article
    <>,
    sdsd <> wrote:

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


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


    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
    dorayme, May 11, 2008
    #2
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Hypo
    Replies:
    6
    Views:
    406
  2. Jo9100

    CSS noob question

    Jo9100, Apr 16, 2007, in forum: HTML
    Replies:
    1
    Views:
    375
    Neredbojias
    Apr 16, 2007
  3. jobs
    Replies:
    5
    Views:
    320
    dorayme
    May 26, 2007
  4. Replies:
    19
    Views:
    1,353
  5. Larry Edelstein

    Noob has trouble with io/wait on Windows

    Larry Edelstein, Feb 23, 2006, in forum: Ruby
    Replies:
    1
    Views:
    186
    Dave Burt
    Feb 23, 2006
Loading...

Share This Page