[CSS] overlapping boxes in Mozilla

Dev Shed Forums Sponsor:

September 3rd, 2003, 10:14 AM

moxie@devshed

Junior Member

Join Date: Sep 2003

Location: Netherlands

Posts: 10

Time spent in forums: < 1 sec
Reputation 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;
}

September 4th, 2003, 12:05 AM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,526

Time spent in forums: 1 Month 1 Day 19 h 47 m 28 sec
Reputation Power: 584

Quote:

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.

Ask a better question, get a better answer.

September 4th, 2003, 03:55 AM

moxie@devshed

Junior Member

Join Date: Sep 2003

Location: Netherlands

Posts: 10

Time spent in forums: < 1 sec
Reputation 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.

September 4th, 2003, 11:50 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,526

Time spent in forums: 1 Month 1 Day 19 h 47 m 28 sec
Reputation Power: 584

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

September 5th, 2003, 03:23 AM

moxie@devshed

Junior Member

Join Date: Sep 2003

Location: Netherlands

Posts: 10

Time spent in forums: < 1 sec
Reputation 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.

September 5th, 2003, 03:42 AM

moxie@devshed

Junior Member

Join Date: Sep 2003

Location: Netherlands

Posts: 10

Time spent in forums: < 1 sec
Reputation 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.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: