100% width table overflowing the bounds of the parent element




12 years ago
12 years ago


(Reporter: zola, Unassigned)


Firefox Tracking Flags

(Not tracked)



(2 attachments)



12 years ago
User-Agent:       Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 1.0.3705)
Build Identifier: 


This is supposed to be a liquid layout. Although the center div container is not given an explicit width (because that would no longer be a liquid layout), the two outside boundaries of it are explicitly declared in the css via a right-margin and left-margin command.

Apparently Firefox can't calculate how many pixels are between these two boundaries despite all other widths being fixed, and when the 100% width table is put into the container, the layout is ruined.

This is not logical. According to W3, something set at 100% inside a parent element is supposed to fill it and there's no reason that the browser can't figure out how wide that element is.

The page renders perfectly in Internet Explorer. It is also fully compliant with W3 according to the add-in checker that I use in Firefox. 

Reproducible: Always

Steps to Reproduce:
1. Put a 100% width element into the center div container
Actual Results:  
The page looked like ****.

Expected Results:  
The browser should know how wide the viewport area is, and if the left and right boundaries are explicitly set it should be able to then calculate what is left over.

Oddly, if I just stick a bunch of text in the center, there are no such issues. So obviously Firefox CAN figure it out.
Can you make a minimal testcase and then 'Add an attachment'?

Comment 2

12 years ago
Created attachment 263881 [details]
simplified version of page and css file

Here you are--very stripped with additional observations on the new page itself.

Comment 3

12 years ago
one additional note--even if margins aren't supposed to work on <div>, you can see there is still a problem--the stuff in the div is supposed to be in-between the floats, it isn't supposed to override them. And if you just have text in there, that's precisely  how it works, so why would a 100% element be a special case and why would overflow: hidden; make the element behave?
Created attachment 263888 [details]
standalone testcase
This is the correct behaviour.
From CSS 2.1:10.2 Content width: the 'width' property
    Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block."

IE windows seemingly calculates the width of the table 'correctly' because your centre column 'hasLayout', a IE only property (due to the height and max-height declaration) [1]
All other browsers calculate the width as quoted above.
Note also that your stylesheet has an error; you set the margins for the centre column thus:
#body_content_center {
left-margin: 190px;
right-margin: 190px;
Browsers will ignore this (and give the div {margin:0}), because it is invalid syntax. It should be
margin-left: 190px;
A quick trip to the css validator [2] would have revealed this error.
[1] http://www.satzansatz.de/cssd/onhavinglayout.html
[2] http://jigsaw.w3.org/css-validator/
Last Resolved: 12 years ago
Resolution: --- → INVALID

Comment 6

12 years ago
What's really stupid is that I double checked that margin command twice and didn't pick up on it. Thanks for your time--I have the page validator but not the css validator, so that will be very helpful.
You need to log in before you can comment on or make changes to this bug.