View Full Version : CSS Layering Help

12-22-2005, 05:48 AM
I coded a CSS layout, and I'm having some problems with it when viewed on Firefox. It looks prefectly fine on IE6, but on FF it's not aligned to the center. I provided an online place for you to see it.



It should look like the attached image. It works fine with IE6.

Please help me fix it. Thanks!

12-22-2005, 05:54 AM
Absolute positioning, yuck. Move your div with id="left" before your div with id="right" then get rid of the absolute positioning in the CSS for left, to center a block level element like a div or a table use margin:auto; currently you have your margins set to 0 on your main div. This example should give you some ideas on how to do it properly. http://bonrouge.com/2c-hf-fixed.php
Usually when a layout is okay in IE but bad in Firefox then there is probably something wrong with your coding. e.g errors. You can use the validator (http://validator.w3.org) to check the errors you have.

12-22-2005, 06:01 AM
#wrap {
width: 760px;
background-image: url(wrap.jpg);
background-repeat: repeat-y;

12-22-2005, 06:04 AM
The layout is now aligned to the center at FF, but the navigation menu went to the left and the content part went deep down the navigation.

12-22-2005, 06:16 AM
Try floating the #right div to the left. You may need to decrease its width.

12-22-2005, 06:28 AM
Sorry for the late response. I messed up with the code and I couldn't put it back as it was on my 1st post. Anyway, here's what I came up with:


I've updated it. There's some problem with the layout on FF. It's fine on IE6. But the width of the #right and #rightads is not the same when viewed with IE.
I also want the navigation boxes to overlap the content boxes (#rightads and #right). I'm confused with the coding.

12-22-2005, 10:32 AM
^I attached a screencap of the layout that looks crap when viewed at FF...

Please help me fix this layout.