Div aligment and height problems

[mosko]

I'm trying to work through making some layouts using only css instead of tables. I'm having a very hard time figuring out why my height won't span to 100% of the viewable width and why there are gaps between the various div elements.

What I'm trying to layout is this:

http://www.moss-pultz.com/random/jones/about3.jpg

But what I have now is this:

http://www.moss-pultz.com/random/jones/

I'd really appreciate if anybody could help me understand why these divs won't line up.

Thanks!

Mosko

[mark87]

To solve the gap, take out height: 141px; from #main_top.

As for the alignment problems, to me it looks like your layout image anyway?

You should note that in IE, the background images have a nasty grey background because it doesn't support PNG alpha transparency. However, you can use the IE alpha filter to get around this.

[mosko]

This still doesn't fix the gap issue. Although it is now a bit better:

http://www.moss-pultz.com/random/jones/

Also I still can't get the div to span to 100%. Thanks a lot for the reply. Hopefully you have another idea I could try?

-Mosko

[harbingerOTV]

the gap is caused by the defualt paddings/margins that some of the elements you are using have. Since FF, IE and other browsers all give slightly different defaults to these elements the global reset is the way to tackle the issue. Add:

* {
padding: 0;
margin: 0;
}


to the beginning of your CSS page. It will reset all your paddings and margins to 0. You'll need to go back in and readjust alot of them but it will make it easier in the long run, especially to making it cross browser.

[mark87]

Or you could just give the ul and h2 a margin of 0 and not have to worry about setting the margin and padding on each element again.

#main_top ul, h2 {
margin: 0;
}

[mosko]

Thanks guys. Both of those methods seem to work well. Could anybody tell me how to get the lower divs to span to the end of the screen (100%) ?

Thanks!