A Simple 2 Column Layout ?

[donishere]

I'm trying to set up my homepage with a simple layout. A banner at the top. Beneath the banner is two columns. The left column is main content. The right column would be links and other tidbits. All of this is supposedly inside a container.

However, in setting up my DIVs, the border of the main container is being placed in different places on different browsers.

http://donortega.com/index.php

http://donortega.com/donortega1.css

In IE, the container border is BELOW the content-left and content-right DIVs.
In Firefox, the container border is ABOVE the content-left and content-right DIVs.

This seems like a trivial problem, but I don't know what's going on. Thanks for the help.

don

 

[Vragabond]

This is because your content divs are floated and the container does not expand to fit floated elements. If you add [tt]overflow: auto;[/tt] to your container, you should be ok. Failing that, you can provide a clearing element at the bottom of both contents to achieve the same effect. If you are planning on having a footer, this would be a good idea.

 

[simonchristieis]

then dont use divs ??

why not set up the page using a table ?

<table width="100%" Height="100%">
<tr><td colspan="2">Banner</td></tr>
<tr><td>Menu</td><td>Content</td></tr>
</table>

 

[donishere]

Thanks Vragabond...

Using [tt]clear: both;[/tt] on my footer section did the trick.

Another question:
Why are the two content DIVs given different widths in different browsers? Should I just use percentages for the [tt]width[/tt] of the two content DIVs? I added different background colors to the two content DIVs to see how wide each is in IE and Firefox.

Also, the [tt]padding[/tt] property for my footer div is different in IE and Firefox. Why?

Thanks again,
don

 

[Vragabond]

IE usually works a little better with a complete and proper doctype. That way its box model adheres to standards and creates boxes equal in size to those FF does:

http://www.w3.org/QA/2002/04/valid-dtd-list.html

 

[donishere]

I added a doctype and it looks like IE and Firefox are sizing the content divs identically now.

Now, my footer bar is a looking a bit weird in IE. In Firefox, the footer is correctly underneath both the content-left and content-right divs.

However in IE, the top edge of the footer bar is where the content divs are. Since the footer has a background color, the background color spills into the content divs. Yet, the text of the footer is properly placed below both content divs.

Anyone know why this is?