Firefox Positioning Problems

[mikka23]

Can someone see how I can make the main body div containing my left and right column expand with the columns but still remain in the right position just under header and still centered? It appears correctly in IE but not in firefox. Please if you can help post.

Site is:http://www.psshapes.yurx.com/cssdesign/

[Ryan Fait]

I don't quite understand what you're trying to do. In any case, you should always design for Firefox first.

You've got a lot of validation errors, try fixing those and let's see what happens.

[mikka23]

I only had one validation error and I have sorted it. If you look in IE at the main body you will see my site as it should. Then look in firefox you see the main body div not expanding. If I make the main body position:absolute then it expands with the divs inside it but then it isnt centered. I need it centered and expanding.

[mikka23]

Managed to fix it using a method new to me. Position: absolute and margin -400px, left:50%

[Ryan Fait]

Oh, IE is rendering it incorrectly. Firefox is doing what it should. In absolute positioning, an element is removed completely from the normal flow of the page. It is, in effect, independent. It will not respond to the width of the browser. You shouldn't be using positioning like that as if the browser window gets too small, part of the design goes off the screen where it's inaccessible. Try using the margin: 0 auto; or another method for centering and you'll have a fluid design.

[mikka23]

I could center it using that but it then did not expand. This method works in all resolutions to 800x600.

[Ryan Fait]

Hm, that's odd. It should expand if you're using percentages.

[mikka23]

I dont actually mean expand as in %width. I mean it gets taller (height) as the column inside it get taller when more content is added.

[Ryan Fait]

Again, if the div is inside another, the outsite one should expand. Positioning is still probably the culprit.