SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Apr 2004
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css simple layout problem

    I'm trying to make a simple css layout and I want it to have 3 columns: left, middle and right. I set the total width to 740px (ice layout, not liquid).
    I don't know how to position the middle one after the left one, and the right one after the middle one (when I say after, I mean at the right). I'm trying to do it without using position: absolute, because I get different results in different browsers, I was wondering if there was something else to do.
    Here goes the code I have.
    Thank you a lot.


    <html>
    <head>
    <style type="text/css">

    #leftBar {
    border: 1px red solid;
    width: 120px;
    }

    #middleBar {
    width: 540px;
    border: 1px solid blue;
    }


    #rightBar {
    border: 1px green solid;
    width: 100px;
    }


    </style>
    </head>
    <body>
    <div id="leftBar">left</div>
    <div id="middleBar">middle</div>
    <div id="rightBar">right</div>
    </body>
    </html>

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Simple answer is to add "float: left;" to all the divs. Alternatively you could do something with the margins of the center column - if that is your content, you might want it to come first in the markup.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,800
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Also don't forget that borders and padding are added to the width (in the correct box model) therefore your dimensions above will add up to 766px wide and will not fit inside a 740px container (I assume you meant 760px anyway).

    I'm trying to do it without using position: absolute, because I get different results in different browsers,
    There should be no problems using absolute positioning between browsers and in most cases will give more consistent reults than floats (because of ie bugs (3 pixel jog etc)). However absolute elements are removed from the flow and are useful in some situations but not if you want following content to interact with the element above.

    As Buddy said above you could simply float all the columns left as long as you make sure the main container is wide enough.

    Paul

  4. #4
    SitePoint Addict
    Join Date
    Apr 2004
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you a lot for helping me
    I corrected the layout, but there's a little difference between Mozilla Firefox and IE 6. In Firefox I see all the boxes without any space between them. But in IE 6 there's a little space, it's only a pixel I think. I don't know how to correct this, and if it is or not possible to get the same result in both browsers (without the spaces).
    And the second thing, and the most important. I'm aware of the incorrect box model in IE 5.X, so I captured the screen in both browsers(Firefox and IE 6), and when I see their measures in Photoshop, the one from Firefox was 762 px (that is correct, because I specified 760 + 2 px of the border). But the one from IE 6 is 760 px.... I changed for testing to 770px, and in Photoshop I get 770px, not 772px like I expected....
    I'm using XHTML, but I "thought" IE 6 was in standard mode, not quirk...
    Hope you can guide me, thanks a lot

    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Test Page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #leftBar {
    position: absolute;
    left: 0;
    top: 10px;
    border: 1px red solid;
    width: 120px;
    }
    #rightBar {
    position: absolute;
    top: 10px;
    right: 0;
    border: 1px green solid;
    width: 100px;
    }
    #middleBar {
    position: absolute;
    top: 10px;
    left: 121px;
    padding-top: 0;
    border: 1px solid blue;
    width: 536px;
    }
    #all {
    position: absolute;
    width: 760px;
    height: 90%;
    border: 1px black solid;
    top: 10px;
    }
    </style>
    </head>
    <body>
    <div id="all">
    <div id="leftBar">left</div>
    <div id="middleBar">middle</div>
    <div id="rightBar">right</div>
    </div>
    </body>
    </html>

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,800
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    The xml prologue above the doctype causes ie6 to go ionto quirks mode and use the broken box model. (In fact any comment tags above the doctype will cause quirks mode in ie6). Thats why you get the different measurements and the gaps.

    Take out the xml prologue and it will all work as expected except that you will need to define 100% for the body so that your other container will adhere to 90%, otherwise it has nothing to base its percentage on.

    Code:
    body {height:100%}
    Usually you will specify html,body {height:100%} but it doesn't seem necessary in this case. html,body{height;100%} upsets iemac anyway so you would need to use the mac hiding hack if you want to use it.

    e.g.
    Code:
    /* commented backslash mac hiding hack \*/ 
    html, body{height:100%;} 
    /* end hack */
    Have a look at the FAQ on the broken box model for ways to accomodate ie5 - 6 in various modes as sometimes you may want to work in quirks mode but the box model hacks then need to be coded differently.

    Hope that helps.

    Paul

  6. #6
    SitePoint Addict
    Join Date
    Apr 2004
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you a lot Paul....
    I was using this line:

    <?xml version="1.0" encoding="iso-8859-1"?>

    Because I knew that it's necessary in other languages like Spanish (to the correct display of some characters like for example) and the default is UTF-8, that have some conflicts with those characters.
    If this is not working as I need it, maybe I should still use HTML 4.1...
    Thank you again

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,800
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Just leave the xml prologue out altogether and put the character encoding into the meta tag.

    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    Paul

  8. #8
    SitePoint Addict
    Join Date
    Apr 2004
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great Paul, Thank you a lot


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
  •