Topic: CSS Layout Help (Page 1 of 1)

Hello all, I am working on my first CSS layout and I have run into a couple layout issues.

The first can be seen in Internet Explorer. I have a pretty basic 3 column layout, 750px wide in all, with a header and footer. Each column is 230px wide plus 10px of padding all around for a total width of 250px per column. All 3 columns are enclosed in a container div and the left and center columns are enclosed in a second container div I called wrapper. When I view the page in IE with all of the proper widths assigned the 2 columns I placed inside the wrapper div are aligned properly horizontoly but vertically they are forced below the 3rd column. To corect this misalignment I have to widen the container div to 753px. This results in a 3px gap between the right column and center column. Is there any way to counter this? I would really like all 3 columns to be nestled up next to one another.

The second problem can be seen in Firefox. For some reason the footer is way to tall. It is stretching up behind the left and center columns and appears to be aligning itself with the bottom of a div I have "spanning" the left and right columns.

The page and CSS can be viewed here:
http://www.unisonmicro.com/cssstuff/index.html
http://www.unisonmicro.com/cssstuff/main.css

I went ahead and left my container object at 753px since it makes it easier to see what is ahppening with the footer in Firefox. Any and all help is greatly appreciated.

http://reisio.com/temp/stiner/

(Edited by reisio on 07-01-2005 02:01)

Thanks very much. I was not familiar with the clear tag, I'm sure that will come in very handy.

Once again, reisio comes to the rescue.

Someone has got to make reisio a superhero costume with a cape so he can fly around saving the day.

___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

Man he's fast....