Hello! I'm trying to get back into web design after being on break for a few years, so i'm attempting to make a basic 2 column, tableless layout. check it out.

As you can see, i ran into a problem on the left side. The text continues to expand over the end of the pretty rounded frame instead of expanding the frame's height. This is because the left column is set to float left. Now, i could throw a table in there and be done with it, but i'd rather stay away from tables. Do any of you know of another way i can get this done without a float, while still keeping the two text columns independent of each other?


any help or criticism is welcome! Thanks in advance!
- Squ

If you're eventually going to add more content to the right column as you do it will expand things vertically and everything will be fine. As long as you keep the right column within the normal document flow your container will expand with it. When you go to position that column don't use any css position or float, but give #content_right a left margin to make sure it clears the left column. Otherwise it will wrap itself around that column at some point.

If you are eventually going to add a footer to the layout you can use the clear property on the footer which will keep it below both columns and also get the container to expand to the bottom of the footer. The clear on the footer (if you add one) will let you use css postioning or a float on the right column if you want.

thanks for the reply!
Is there a way to make it so the entire frame expands to the height of the longest column? for example, with vangogh's solution, (if i understand it correctly) the entire frame would expand to the height of the right (content) column. However, what happens if the left column (menu) is taller than the right (like it is right now)? is it possible to get around this problem?

If you need a better example, please let me know, I’d be happy to provide you with one! And again, thanks for the help! ;-)

I think the easiest way would be to add some kind of footer and use clear:both on the footer. When you float something or use css positioning on it that something is taken out of the normal document flow. As far as the container is concerned that floated element isn't exactly inside of it anymore, which is why a border won't extend around it.

With most layouts one or the other column is often always the longest and if you know one will be longer keep that one in the document flow and either float or position the other. If you're not sure though which will be longer then adding something beneath them by using clear will work.

If you add a footer and use clear it will stay below your floated column or columns and still be considered part of the document flow. The containing element will see that cleared footer as inside of it and extend any border or background color around it.

Thanks again vangogh! Your solution worked perfectly.

Take care!
- Squ

Glad to help.