View Full Version : Review my CSS Layout -- needs tweaking

07-08-2005, 06:46 PM
This is my first all CSS layout and I wanted to post it for review and especially suggestions on how to make it better.

Layout (http://www.compugenic.com/pix/post/index.html)

And I also created a .jpg that shows a graphical representation of the layout, has all the divs labeled, and shows the width, height, and attributes that I was going for. You can find that image here (http://www.compugenic.com/pix/post/cssLayout.jpg)

I can tell you that I am already having the following problems:

1. In Firefox, #HeaderRight is being cut off on it's left side so the border-left is not displaying. I also noticed that #Sidebar is doing the same. I know it has something to do with the left floats that is next to each, but I am unsure how to get the layout I want and ensure those don't get cut off.

2. I also would like #HeaderRight and #SideBar to expand vertically with #HeaderLeft and #Content respectively (Just like tables would). I remember reading once that there is some sort of a trick if you use a background image, but I couldn't find that again.

3. Right now in Firefox, #SideBar is appearing below #Content and all the way to the right. It's in the right position, it's just not next to #Content the way I intended it to be.

I think those are the main issues. If anyone could please help me clean this up to ensure it worked properly, and let me know if there are any compatibility issues, I would very much appreciate it.


Edit: I think problem #3 might only appear once I add content. #SideBar appears in the correct place in the link I sent above (in IE6 and Firefox, atleast)

Also, everything seems to line up nicely when I don't define a float for #SideBar and rather only use a float for #Content, however, I do still need them to stretch to the other's height and fix the issue with #SideBar and #HeaderRight being cut off on their left sides.