The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

I need help with columns.

I am converting one web site into a tableless web site and am nearly complete with the project. Centauri helped me last week with profoundly great advice that worked like a charm. I have one problem left that I do not know how to deal with. I need to have two columns that have text side by side. This is the old web site and how the columns look now: http://www.gccnorwich.com/committees.htm

Thank you. That looks very close to what I need. I applied your code and this is what it looks like now. I need to center those two columns better but this is a quantum leap forward: http://www.tomkaszuba.com/test/history.html#

Actually, Tom, that looks like a list of names, and would be better marked up as a single unordered list. If the <li>s are made 50&#37; of the width of the <ul> and floated left, two columns will naturally be formed without any non-semantic divs being required.

Won't be back on here for a couple of hours, but I can knock up an outline for you then if you like.

Actually you did understand my original post. I do need two columns for the final page on the site which it titled "committees". That needs two columns and I figured that if I could do it with the history page then I could apply the same code for the committees page.

However, I do think the list will work better on the history page as has been suggested.

I figured it out! In the #rightbodyPan ul I just removed the height:200px; element and it worked.

You've got other predefined styles that are interfering with the new styles so you will to make the selectors more specific that the previous and override any styles that you don't want for that particular list.

Originally Posted by deronsizemore

Mark, with overflow:hidden on the ul element, is that essentially the same idea as using the .clearfix method? Any element which contains floated children gets overflow:hidden?

In all popular browsers overflow:hidden works similarly to the clearfix method, though it also has other effects like cutting of constrained content but for simple layouts like a parent containing two floats I haven't had any problems with it, it's great because it's just one rule. overflow: auto; also works but can sometimes bring up scroll bars.

deronsizemore post seemed to work well except for the positioning being a bit off.

You just need to set widths for the floats - A float without a width will shrink wrap it's contents(become as small in width as possible) so just set equal width's for these or use the 50&#37; / 50% technique from my example - though it's simpler just to set fixed width's as your site is a fixed width layout.

Is the #rightbodyPan ul actually used for anything else? I ask as the founders list is still one column as its style is being over-ridden by the #rightbodyPan ul style, as this is more specifically targeted. If you refer to the founders list as #rightbodyPan .founders then the styles do get applied, but some other things need to be set to counter styles set in #rightbodyPan ul :

Is the #rightbodyPan ul actually used for anything else? I ask as the founders list is still one column as its style is being over-ridden by the #rightbodyPan ul style, as this is more specifically targeted. If you refer to the founders list as #rightbodyPan .founders then the styles do get applied, but some other things need to be set to counter styles set in #rightbodyPan ul :

In all popular browsers overflow:hidden works similarly to the clearfix method, though it also has other effects like cutting of constrained content but for simple layouts like a parent containing two floats I haven't had any problems with it, it's great because it's just one rule. overflow: auto; also works but can sometimes bring up scroll bars.

Nice! I may have to start using that for my layouts as I try to keep them fairly simple anyway, so it should work for what I normally do. I can never fully remember the clearfix code so I always copy/paste it. Overflow:hidden is really simple to remember.