SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two equal DIVs next to each other

    I'm trying to get two DIV's with equal widths to sit next to each with some spacing in between them - I'm not having much look though (mainly cos I'm struggling to change over to CSS designs).

    So far, I've got this:
    Code:
    <html>
    <head>
    <title>2 col layout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="en" />
    <style type="text/css">
    <!--
    #left_hand {
    float:left;
    width:49%;
    background-color:#C2ADD6;
    border:1px solid #639;
    padding:10px;
    /* margin:0 15px 20px 0; */
    text-align:right;
    height:200px;
    }
    #right_hand {
    float:right;
    width:49%;
    background-color:#F5F5F5;
    border:1px solid #CCC;
    padding:10px;
    /* margin:0 0 20px 0; */
    text-align:right;
    height:200px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="left_hand">
    <h2>Left Hand Column</h2>
    <p>left hand content, left hand content, left hand content, left hand content</p>
    </div>
    <div id="right_hand">
    <h2>Right Hand Column</h2>
    <p>right hand content, right hand content, 
    right hand content, right hand content, 
    right hand content, right hand content, 
    right hand content, right hand content, 
    right hand content, right hand content</p>
    </div>
    </body>
    </html>
    In IE (W2K), it works fine - two boxes next to each other. However, in Mozilla Firefox the right hand box goes to the right but both boxes are too wide so the right hand box is knocked underneath the left hand box. I can't work out why they don't fit.

    Has anyone got any ideas or help???? This is doing my head in!
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  2. #2
    SitePoint Member cvanek2004's Avatar
    Join Date
    Apr 2004
    Location
    Boston,MA
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post The problem is "padding"

    FireFox is adding your 10px padding to the width of your boxes. This is a glitch, but one you can work around. Just remove the padding form your stylesheet and nest an extra DIV inside your floating DIVs. Like this:

    <html>
    <head>
    <title>2 col layout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="en" />
    <style type="text/css">
    <!--
    #left_hand {
    float:left;
    width:49%;
    background-color:#C2ADD6;
    border:1px solid #639;
    /* margin:0 15px 20px 0; */
    text-align:right;
    height:200px;
    }
    #right_hand {
    float:right;
    width:49%;
    background-color:#F5F5F5;
    border:1px solid #CCC;
    /* margin:0 0 20px 0; */
    text-align:right;
    height:200px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="left_hand"><DIV style="padding:10px;">
    <h2>Left Hand Column</h2>
    <p>left hand content, left hand content, left hand content, left hand content</p>
    </div></div>
    <div id="right_hand"><DIV style="padding:10px;">
    <h2>Right Hand Column</h2>
    <p>right hand content, right hand content,
    right hand content, right hand content,
    right hand content, right hand content,
    right hand content, right hand content,
    right hand content, right hand content</p>
    </DIV>
    </div>
    </body>
    </html>

  3. #3
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh right - thats a bit crap isn't it?? So the box model for IE just says "I want my box to be a certain width and don't effect that with padding or margins" whereas Mozilla says "I want my box to be a certain width and while you're at it, add on these margins and/or padding."

    I suppose an extra DIV isn't too heavy on the code...

    Cheers for your help cvanek2004!
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  4. #4
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, now I've sorted that, I'm struggling to get the boxes the same height! Is there a quick fix to get this working? The box borders and backgrounds don't seem to work with the box content....
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Is there a quick fix to get this working?
    Can you explain the problem as you've set the height to 200px so they should be the same height. (and show your updated code )

    However as an aside, you do realise that should content extend past the 200px mark then mozilla will just let all the text flow out of the div.

    IE will do its own thing once again and decide to increase the height to accomodate.

    You either need to not specify a height and let the content dictate the height or you will need to add some styles specifically for mozilla.
    Code:
    html>body #left_hand, html>body #right_hand {
    min-height:200px;
    height:auto;
    }
    This needs to follow the original styles in the css otherwise it will be overwritten by the height property.

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •