#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Netherlands
    Posts
    10
    Rep Power
    0

    [CSS] overlapping boxes in Mozilla


    I have a kind of three column design. The box in the middle should stretch automatically, and the content of that middle box should center. This works OK. I gave the middlebox some left and right margin to avoid overlapping the other two boxes.
    If I narrow my browserwindow in IE everything is allright, but doing so in Mozilla keeps the middle box just where it should end (225px from the left), but the contentdiv doesn't, while it is nested within that middle box. So this content still "jumps out" its parent to overlap the left box.
    Any hack or did I do something wrong?


    #left {
    position:absolute;
    top:0px;
    left:0px;
    width:225px;
    }

    #right {
    position:absolute;
    top:0px;
    right:0px;
    padding-top:140px;
    text-align:left;
    background:url(plaatjes/2stenen.jpg) no-repeat top right;
    width:200px;
    }

    #middle{
    margin-left:225px;
    margin-right:200px;
    width:auto;
    border:dashed 1px #ccc;
    }

    #content {
    margin:auto;
    padding-top:100px;
    width:450px;
    }
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    but the contentdiv doesn't, while it is nested within that middle box. So this content still "jumps out" its parent to overlap the left box.
    Any hack or did I do something wrong?
    This is an example of correct behavior by Mozilla (Gecko). MSIE incorrectly expands the containing element.

    Copy and paste this code
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4 Final//EN">
    <html> <head>
    <title>Nested Boxes</title>
    
    <style type="text/css">
    
    #fatbox {width: 250px;
             height: 150px;
             border: 2px solid green;
             margin: 10px;}
    
    #skinnybox {width: 150px;
                height: 150px;
                border: 2px solid green;
                margin: 10px;}
    
    .innerbox { width: 200px;
                height: 100px;
                padding: 5px;
                margin: 10px;
                border: 2px solid red;}
    
    </style>
    
    </head>
    
    <body>
    
    <div id="fatbox">
       <div class="innerbox">Here, the inner container fits within the outer.</div>
    </div>
    
    <div id="skinnybox">
       <div class="innerbox">Here, the inner container doesn't fit within the outer.</div>
    </div>
    
    </body> </html>
    or, you could go here with Moz and IE.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Netherlands
    Posts
    10
    Rep Power
    0
    Personally I think the way IE interprets it is more logical and could be easier to work with, but I now understand the differences. Thanks for the example.

    But looking at my example, how can I solve this so it looks good for both browsers?
    Fixed left box/fixed width
    Fixed right box/fixed width
    In between these two boxes I want the inner (fixed width-) column to allways center in the browserwindow without ever overlapping the other two boxes.
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    Without knowing how you use your code, I tried this;
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4 Final//EN">
    <html> <head>
    <title></title>
    
    <style type="text/css">
    #left {
    position:absolute;
    top:0px;
    left:0px;
    width:225px;
    height: 150px;  /*added in lieu of text*/
    border: solid blue;
    }
    
    #right {
    position:absolute;
    top:0px;
    right:0px;
    padding-top:140px;
    text-align:left;
    background:url(plaatjes/2stenen.jpg) no-repeat top right;
    width:200px;
    border: solid blue;
    }
    
    #middle{
    margin-left:225px;
    margin-right:200px;
    padding:10px;
    width:auto;
    border:dashed 1px #ccc;
    }
    
    #content {
    margin:auto;
    padding-top:100px;
    border: 1px dotted red;
    }
    </style>
    
    </head>
    
    <body>
    
    <div id="left"></div>
    <div id="right"></div>
    <div id="middle">
       <div id="content"></div>
    </div>
    
    </body> </html>
    Borders added for clarity.
    I've also put this at http://garyblue.port5.com/webdev/middlebox.html

    Note the change at #content.

    "Personally I think the way IE interprets it is more logical and could be easier to work with, but I now understand the differences. "

    Yeah, at first blush it does seem so. I have since read an excellant article regarding the reasons for this. They are compelling. Sorry I can't find the reference at the moment. Take my word for it.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Netherlands
    Posts
    10
    Rep Power
    0
    Thanks for all your efforts!
    But... it is not (but almost) what I had in mind. You see, what you made is almost wright, but the middle box should have a fixed width (in my case 450px) and should always be centered in the window. When narrowing the browserwindow the whitespace at the left and right of the middlebox gets lesser until it touches the left and right box, but it is NOT allowed to surpass them, not to overlap them.

    It could have been done with tables, but I don't want that. Then, the solution would have been:
    Three column table (width:100%), left and right <td> a fixed width, and the center column stretches. In this center column there is another table which always centers, but has an spacer image to prevent it from becoming smaller than 450 px.


    I hope this makes sense to you? I apologize if I wasn't clear enough in my previous post, allthough I think I was.
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Netherlands
    Posts
    10
    Rep Power
    0
    I've made this with tables and this is what I would want, but with CSS:

    Example

    To see what happens adjust the size of your browserwindow.

IMN logo majestic logo threadwatch logo seochat tools logo