PDA

View Full Version : Firefox Behaving Badly Relative Div Positioning



andrewmta
Feb 21st, 2007, 03:45 PM
I think that I must be missing a tag. I'll try and explain what I'm trying to do, what I have done and where the problem lies. I've included my css as style tags just to make things a little easier to understand.

I have a container div with a width of 1000px. Inside of that div I have three columns of different widths, all floated and positioned relative.

<div id="container" style="width: 1000px;">

<div id="left" style="width: 300px;position: relative;float: left;"></div>
<div id="center" style="width: 500px;position: relative;float: left;"></div>
<div id="right" style="width: 200px;position: relative;float: right;"></div>

<div style="clear: both;"></div>

</div>

Now what I'm trying to do is place an image of content in the left box, the article text in the center box and a skyscraper ad in the right box. I'd like to place a line between the center and right boxes so I add border-left: 1px solid #c8c8c8 to the right div.

Now here is where the problems begin. I want the height of the left and right divs to stretch and be equal to the center div, which always is much longer because of the content inside. Since different articles are different lengths I can't just set a default height either.

Is there any way to allow for my left and right divs to inherit their height from the center div?

In IE it does this automatically. In FireFox the left and right divs height does not match the center column, tho for some reason it does seem to match each other.

If anyone has experienced this problem before and knows how I might fix it, cross browser, I'd appreciate the help. Thanks.

Excavator
Feb 21st, 2007, 03:55 PM
Hello andrewmta,
Have a look at some of these ideas. (http://www.google.com/search?q=equal+height+3+column&rls=com.microsoft:*&ie=UTF-8&oe=UTF-8&startIndex=&startPage=1)

andrewmta
Feb 21st, 2007, 04:00 PM
Thanks but unfortunately I'm in a situation where absolute positioning is not an option. I need to be able to build a table-type grid system using relative positioning.

_Aerospace_Eng_
Feb 21st, 2007, 04:51 PM
Who said it required absolute positioning? The simplest way is to make a background image and have it repeat vertically on the parent containing element.

andrewmta
Feb 21st, 2007, 04:57 PM
I found the solution here:

http://www.webmasterworld.com/forum83/200.htm

I thought I'd share it with this forum.

It seems that in order to set a nested div to a height of 100% you need to create a container around it with a height set to 100%.

Excavator
Feb 21st, 2007, 05:43 PM
That link you are looking at has the xml declaration before the DocType.
DocType must be the first line of code to work. IF you really need the xml declaration, put it in a meta tag further down in the head of your document.

His wrong example:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>

A better example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>




And for 100% height layouts I've always had better luck giving both html and body height: 100%;
Like this layout (http://www.nopeople.com/CSS/full-height-2column/)

andrewmta
Feb 21st, 2007, 05:57 PM
hmmm apparently I spoke to soon. When I've set a nested div to 100% height and the div container around it to 100% (as well as body and html) as you just suggested, it only appears to work alright.

Once the content of the page becomes so full that it takes up more than 100% of the screen resolution height, it breaks. Maybe I'll try and do this without using floats.

brother wolf
Feb 21st, 2007, 06:48 PM
Is something like this (http://richut.freehostia.com/test/columns.html) what you are trying to do? It uses a background image as Aerospace_Eng suggested.

Excavator
Feb 21st, 2007, 06:58 PM
Hello again andrewmta,
I made a sample that does not break with a lot of text and stays full height when there is only a little text.

Check it out at http://www.nopeople.com/CSS/full-height-3column/

Tested in IE6, IE7 and FF2.
valid CSS and XHTML 1.0 Strict.



...

rmedek
Feb 21st, 2007, 08:00 PM
That link you are looking at has the xml declaration before the DocType.
DocType must be the first line of code to work. IF you really need the xml declaration, put it in a meta tag further down in the head of your document.

His wrong example:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>

A better example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>




Just for the record: the xml declaration ("<?xml version…") at the top of the page is optional, but not wrong. What it does do, however, is throw IE 6 into "Quirks" mode. The xml declaration and the content-type meta tag are two totally different elements.

Also, if you're using XHTML 1.1, you can't send content over as text/html. XHTML 1.0 is fine, though. (and this opens up a whole new can of worms in the "how should I send my content" debate).

More info on XHTML: http://dionidium.com/2003/09/00112

Excavator
Feb 21st, 2007, 08:29 PM
Wow, that's a lot to consider.
I've never used 1.1 so I just let DW make that doctype/character encoding.

I'm still not getting how the xml line can come before the doctype and not put IE into quirks mode. Hmmm.

Reading more I found this very handy trick:
In IE6 the DOCTYPE must be the first line in your XHTML file. If it isn’t, your request for standards/strict mode will be ignored and quirks mode will be used instead (Opera 7 does the same). This means that you get IE’s original (read: erroneous) interpretation of the box model and a number of other “features” that don’t align with the W3C specs.

In IE7 however, this bug has been fixed. IE7 therefore doesn’t care whether your DOCTYPE declaration is preceded by an XML declaration or not - either way, it gives you strict mode… and therein lies a problem. If your page starts with an XML declaration you’ll get quirks mode in IE6 and strict mode in IE7. You can verify this yourself by typing the following line of JavaScript into the URL bar of both browsers after your web page has loaded.


javascript:alert(document.compatMode);


In IE6, you’ll see a dialog box displaying the word “BackCompat”, meaning that it is in quirks mode. While, in IE7, you’ll see “CSS1Compat”, meaning that it’s in standards-compliant strict mode. This discrepancy explains the inconsistencies you’re seeing in the two browsers’ displaying of your pages.


That comes from an even better page (maybe) than you showed me rmedek, http://www.thinkvitamin.com/features/design/wake-up-and-smell-the-ie7



Isnt' it just easier to use charset=UTF-8? I have not run into a specific need for the xml declaration yet...

rmedek
Feb 21st, 2007, 08:48 PM
I'm still not getting how the xml line can come before the doctype and not put IE into quirks mode.

It can't—well, it'll put IE 6 into Quirks, not IE 7. But the point is, it's not wrong to use it. It's like saying "min-height" is wrong because IE 6 gets it wrong too. To clarify, though, I (usually) never use an XML declaration. But I didn't want someone to get the idea that the provided code was incorrect—it's actually very correct, so correct that it won't work in IE 6.


Isnt' it just easier to use charset=UTF-8? I have not run into a specific need for the xml declaration yet...

An xml declaration and a content-type meta tag are two completely different things. And you cannot send XHTML 1.1 as text/html. So…



Correct (but will throw IE 6 into Quirks mode):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>


Incorrect (using a XHTML 1.1 doctype but sending content as text):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>


Correct (no XML declaration, XHTML 1.0 doctype, sending content as text):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />


Make more sense?

Excavator
Feb 21st, 2007, 09:08 PM
so correct that it won't work in IE 6.
Too funny :(



Make more sense?
Yes it does - I'm sticking with XHTML 1.0 Strict.

Thanks for all this rmedek - I learned something here., hopefully some of it will stick.