set div width to remaining width of the browser

Discussion in 'ASP .Net' started by Steve Richter, Jun 15, 2007.

  1. using float: left and float: right to build a two column page
    layout.
    <div style="float:left">column 1</div>
    <div style="float:right">column 2</div>

    then I set the width of the first column to a fixed size:
    <div style="float:left; width:10em;>column 1</div>

    how can I set the width of the 2nd column, the float:right div, to
    fill the remaining space of its container?

    I know I can use percentages, but I want the left column to always be
    the same fixed length.

    Is this a case where <table> is the obvious solution?

    thanks,

    -Steve
    Steve Richter, Jun 15, 2007
    #1
    1. Advertising

  2. Do you need this?

    <div style="float:left; width: 10em; border: solid 1px red">
    ZZZZZ
    </div>
    <div style="margin-left: 10em; border: solid 1px green">
    www
    <div>


    > using float: left and float: right to build a two column page
    > layout.
    > <div style="float:left">column 1</div>
    > <div style="float:right">column 2</div>
    > then I set the width of the first column to a fixed size: <div
    > style="float:left; width:10em;>column 1</div>
    >
    > how can I set the width of the 2nd column, the float:right div, to
    > fill the remaining space of its container?
    >
    > I know I can use percentages, but I want the left column to always be
    > the same fixed length.
    >
    > Is this a case where <table> is the obvious solution?
    >
    > thanks,
    >
    > -Steve
    >
    Yuriy Solodkyy, Jun 15, 2007
    #2
    1. Advertising

  3. On Jun 15, 2:00 pm, Yuriy Solodkyy <> wrote:
    > Do you need this?
    >
    > <div style="float:left; width: 10em; border: solid 1px red">
    > ZZZZZ
    > </div>
    > <div style="margin-left: 10em; border: solid 1px green">
    > www
    > <div>
    >


    thank you. I just read of the margin technique in a very good book I
    have:
    http://www.amazon.com/CSS-Anthology...2377400?ie=UTF8&s=books&qid=1181932373&sr=8-1

    a lot of CSS positioning seems to be a hack. esp if you dont want to
    use javascript out of concern of complicating things even further.

    I assume CSS does not allow one div to reference another for is
    position and size? That would seem to be ideal for page layouts.
    ( where the height of div a is always the height of div b, div c
    always has the same absolute X position of div d, ... )

    thanks,

    -Steve
    Steve Richter, Jun 15, 2007
    #3
    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. =?Utf-8?B?cm9kY2hhcg==?=

    how to: div width = browser.width?

    =?Utf-8?B?cm9kY2hhcg==?=, Oct 27, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    511
    =?Utf-8?B?cm9kY2hhcg==?=
    Oct 30, 2006
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    726
  3. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    178
    David Dorward
    Jun 1, 2005
  4. Replies:
    4
    Views:
    120
    Matt Kruse
    Aug 17, 2006
  5. ewosch

    remaining width

    ewosch, Nov 15, 2006, in forum: Javascript
    Replies:
    1
    Views:
    89
Loading...

Share This Page