Div width

Discussion in 'HTML' started by Robert Larsen, Sep 22, 2008.

  1. Hi

    I am trying to get make a div the correct size. I need three areas:
    left, center and right. The left and right should have fixed width and
    the center should grow or shrink to fit the rest. The following works
    perfectly in Firefox, but not in IE:

    <html>
    <head>
    <style>
    html, body { background-color: white; margin: 0px; padding:
    0px; height: 100%; }
    .top { position: absolute; width: 100%; height: 65px;
    background-color: blue; }
    .left { position: absolute; top: 70px; bottom: 0px; left:
    0px; width: 150px; background-color: red; }
    .middle { position: absolute; top: 70px; bottom: 0px; left:
    155px; right: 205px; background-color: green; }
    .right { position: absolute; top: 70px; bottom: 0px; right:
    0px; width: 200px; background-color: yellow; }
    </style>
    </head>
    <body>
    <div class="top">Top</div>
    <div class="left">Left</div>
    <div class="middle">Middle</div>
    <div class="right">Right</div>
    </body>
    </html>

    Can anybody tell me how to make this work in all browsers ?
     
    Robert Larsen, Sep 22, 2008
    #1
    1. Advertising

  2. Robert Larsen

    Ari Heino Guest

    Ari Heino, Sep 22, 2008
    #2
    1. Advertising

  3. Robert Larsen

    Ari Heino Guest

    > Another thing, if margin and padding have a value of zero, then why
    > use them?


    Because they are necessarily _not_ set to zero initially by all browsers.

    --
    Ari
    http://users.utu.fi/athein/
     
    Ari Heino, Sep 22, 2008
    #3
  4. Robert Larsen

    Nik Coughlin Guest

    "richard" <> wrote in message
    news:...
    > On Mon, 22 Sep 2008 20:49:43 +0300, Ari Heino <>
    > wrote:
    >
    >>> Another thing, if margin and padding have a value of zero, then why
    >>> use them?

    >>
    >>Because they are necessarily _not_ set to zero initially by all browsers.

    >
    >
    > So then everytime I have properties in a class or ID, then I should
    > set all 300 plus items to a default value?


    No, but you should understand that they already have a default value and
    that you *may* need to override that.

    > All items in CSS are OPTIONAL. If it's not there, then it should have
    > no value by default.


    No, it should not have "no value" by default - it *will* have a default
    value by default, not no value at all.

    > I'm supposed to write code to satisfy each and every browser there is?
    > The hell if I will.


    This is why some people use a "reset" CSS. I often use *{ margin: 0;
    padding: 0; } so that I don't have to think about it, but if you design the
    site to be reasonably flexible in the first place then the differences in
    the default settings shouldn't break anything.
     
    Nik Coughlin, Sep 22, 2008
    #4
  5. Robert Larsen

    Ari Heino Guest

    > I'm supposed to write code to satisfy each and every browser there is?
    > The hell if I will.


    Welcome to the real world.

    --
    Ari
    http://users.utu.fi/athein/
     
    Ari Heino, Sep 23, 2008
    #5
    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. AndrewF
    Replies:
    1
    Views:
    787
    Bruce Barker
    Oct 10, 2005
  2. =?Utf-8?B?cm9kY2hhcg==?=

    how to: div width = browser.width?

    =?Utf-8?B?cm9kY2hhcg==?=, Oct 27, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    531
    =?Utf-8?B?cm9kY2hhcg==?=
    Oct 30, 2006
  3. Steve Richter
    Replies:
    2
    Views:
    7,929
    Steve Richter
    Jun 15, 2007
  4. tomek milewski
    Replies:
    6
    Views:
    1,309
    tomek milewski
    Jun 25, 2007
  5. K Viltersten

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

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    759
Loading...

Share This Page