I need help with columns.

**Tom_K** · Sep 26, 2007 08:30

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

I need to have that same two column look on a page such as this: http://www.tomkaszuba.com/test/history.html

How can this be done? I know I can pop a table in there....but....this is a tableless web site so if this can be pulled off without tables it would be just great.

Thank you,
Tom_K

**deronsizemore** · Sep 26, 2007 09:53

I would use floats. Maybe something like this:

Code HTML4Strict:

#left-column {
float: left;
}
 
#right-column {
float: left;
margin-left: 20px;
}

Code HTML4Strict:

<div id="left-column">
...Left column content...
</div>
 
<div id="right-column">
...right column content...
</div>

**Tom_K** · Sep 26, 2007 21:44

Originally Posted by deronsizemore

I would use floats. Maybe something like this:

Code HTML4Strict:

#left-column {
float: left;
}
 
#right-column {
float: left;
margin-left: 20px;
}

Code HTML4Strict:

<div id="left-column">
...Left column content...
</div>
 
<div id="right-column">
...right column content...
</div>

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#

Any more tweaks to make it just perfect?

**Centauri** · Sep 26, 2007 23:57

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% 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.

Cheers
Graeme

**markbrown4** · Sep 27, 2007 00:07

Graeme's advice with using a list and floating the items is a good one * picks up the baton..*

Code:

.founders {
  margin: 0;
  padding: 0;
  list-style: none; /* remove bullets */
  overflow: hidden; /* Clear floats */
  width: 100&#37;; /* Clear flots in IE */
}
.founders li {
  margin: 0;
  padding: 0;
  float: left;
  width: 49.9%;
}

Code:

<ul class="founders">
  <li>Samuel Mowry</li>
  <li> William H. Coit</li>
  <li> Mrs. Cornelia E. Coit</li>
  <li> Noah Davis</li>
  <li> Miss Mary M. Lathrop</li>
  <li> Jonathan R. Davis</li>
  <li> Benjamin Durfey</li>
  <li> Harvey Lathrop</li>
  <li> Mrs. Octavia Lathrop</li>
  <li> Wilson Potter</li>
  <li>Nathan P. Avery</li>
  <li>Asa Peck</li>
  <li> Mrs. Lydia Peck</li>
  <li> Walter O. Pearl</li>
  <li> Mrs. Esther Pearl</li>
  <li> James Sisson</li>
  <li> Mrs. Mary Avery</li>
  <li> Mrs. Cynthia L. Potter</li>
  <li> Mrs. Cordelia E. Durfey</li>
  <li> Miss Eunice A. Avery</li>
</ul>

I've made the width's 49.9% so it works in IE, see FAQ on floats(50% + 50% = 101%!)

Also, here's a little tutorial I wrote on Columns and CSS which might also interest you - but the above version doesn't require the other divisions and is easier to maintain.

Hope it helps

http://www.yellowshoe.com.au/tips/columns-again/

**Centauri** · Sep 27, 2007 02:46

Originally Posted by markbrown4

* picks up the baton..*

Well picked ..... up, that is

**deronsizemore** · Sep 27, 2007 09:36

Originally Posted by markbrown4

* picks up the baton..*

Way to run the anchor leg of the relay!

I guess I misunderstood what was being asked totally. My fault Tom.

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?

**Tom_K** · Sep 27, 2007 09:43

I applied the code you posted. For some reason the list cuts off and only displays a 4 names when it should display over 20 names. http://www.tomkaszuba.com/test/history.html

I am grateful for this assistance. How should I proceed from here?

Edit. I fixed the problem. It's explained in the post after the following one.

**Tom_K** · Sep 27, 2007 09:47

Originally Posted by deronsizemore

Way to run the anchor leg of the relay!

I guess I misunderstood what was being asked totally. My fault Tom.

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.

**Tom_K** · Sep 27, 2007 12:25

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

I do need a two column set up for the "committees" page though.

deronsizemore post seemed to work well except for the positioning being a bit off. I need two columns below the paragraph on this page: http://www.tomkaszuba.com/test/committees.html

The old site columns looked like this: http://www.gccnorwich.com/committees.htm

I appreciate the help very much.

**markbrown4** · Sep 27, 2007 15:46

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% / 50% technique from my example - though it's simpler just to set fixed width's as your site is a fixed width layout.

Hope it helps

**Centauri** · Sep 27, 2007 15:52

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 :

Code:

#rightbodyPan .founders {
  margin: 0 auto 20px;
  position: static;
  padding: 0;
  list-style: none; /* remove bullets */
  overflow: hidden; /* Clear floats */
  width: 25em;
  height: auto;
}
#rightbodyPan .founders li {
  margin: 0;
  padding: 0;
  float: left;
  width: 49.9%;
}

**Tom_K** · Sep 27, 2007 16:39

Originally Posted by Centauri

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 :

Code:

#rightbodyPan .founders {
  margin: 0 auto 20px;
  position: static;
  padding: 0;
  list-style: none; /* remove bullets */
  overflow: hidden; /* Clear floats */
  width: 25em;
  height: auto;
}
#rightbodyPan .founders li {
  margin: 0;
  padding: 0;
  float: left;
  width: 49.9%;
}

I made the correction and it did the trick as can be seen here: http://www.tomkaszuba.com/test/history.html

Being new at this I mistakenly used .founders rather than #rightbodyPan .founders in the css. Your fix worked perfectly.

Would it be possible for me to use that same code to format the two columns at this link into two columns at the updates web site correctly? http://www.gccnorwich.com/committees.htm

I am extremely lucky to have found this forum. I would be nowhere without the help I have received here.

**markbrown4** · Sep 27, 2007 16:55

You could put each column in a div for each column or you could use a similar approach as above using a definition list:

Code:

dl {
	margin: 0;
	padding: 0;
	list-style: none; /* remove bullets */
	overflow: hidden; /* Clear floats */
}
dt {
	margin: 0;
	padding: 1em 0 0 0;
	font-weight: bold;
	float: left;
	width: 100&#37;;
}
dd {
	margin: 0;
	padding: 0;
	float: left;
	width: 49.9%;
}

Code:

<dl>
  <dt>Clerk:</dt>
  <dd>Donna Brown</dd>
  <dt>Treasurer:</dt>
  <dd>Edie Savignac</dd>
  <dt>Assistant:</dt>
  <dd>Rose Iams</dd>
  <dt>Trustees:</dt>
  <dd>Robert Mather</dd>
  <dd>David Brown</dd>
  <dd>Michael Brown</dd>
  <dd>Raymond Guillet</dd>
  <dd>David A. Brown</dd>
  <dt>Deacons:</dt>
  <dd>Richard Brown</dd>
  <dd>Lawrence Coleman</dd>
  <dd>Clarence Neal</dd>
  <dd>Seth Owen</dd>
  <dd>Sheila Hayes</dd>
  <dd>Gerry Leone</dd>
  <dd>Rose Iams</dd>
  <dd>Edie Savignac</dd>
  <dt>S.S. Supt.:</dt>
  <dd>Donna Brown</dd>
  <dt>Historian:</dt>
  <dd>Marilyn Brown</dd>
  <dt>Auditors:</dt>
  <dd>Rose Mathers</dd>
  <dd>Sara Hagel</dd>
  <dt>Evangelism &amp; Missions:</dt>
  <dd>Debbie Brown</dd>
  <dd>Rose Mather</dd>
  <dd>Marlene Owen</dd>
  <dd>Elizabeth Neal</dd>
</dl>

The headings occupy the full width but the names only occupy half so stack in two columns just like the example above.

**Tom_K** · Sep 27, 2007 17:20

Thank you very much markbrown4. It looks like things are very close to being finished. I applied the code you posted just above and this is the result: http://www.tomkaszuba.com/test/committees.html

I am a novice but I am so close to completing this site with all of the help I received here.

Any other ideas to make things perfect?

**markbrown4** · Sep 27, 2007 17:34

Code:

dl {
	margin: 0;
	padding: 0;
        padding: 0 0 0 80px;
	list-style: none; /* remove bullets */
	overflow: hidden; /* Clear floats */
}
dt {
	margin: 0;
	padding: 1em 0 0 0;
	font-weight: bold;
	float: left;
	width: 240px;
}
dd {
	margin: 0;
        padding: 0
	float: left;
	width: 200px;
}

This seems more stable within your layout

**Centauri** · Sep 27, 2007 17:38

Alternately, if you wanted two complete columns like in the original site, you could split the list into two lists, and float each one so they are beside each other :

Code:

<dl>
  <dt>Clerk:</dt>
  <dd>Donna Brown</dd>
  <dt>Treasurer:</dt>
  <dd>Edie Savignac</dd>
  <dt>Assistant:</dt>
  <dd>Rose Iams</dd>
  <dt>Trustees:</dt>
  <dd>Robert Mather</dd>
  <dd>David Brown</dd>
  <dd>Michael Brown</dd>
  <dd>Raymond Guillet</dd>
  <dd>David A. Brown</dd>
  <dt>Deacons:</dt>
  <dd>Richard Brown</dd>
  <dd>Lawrence Coleman</dd>
  <dd>Clarence Neal</dd>
  <dd>Seth Owen</dd>
  <dd>Sheila Hayes</dd>
  <dd>Gerry Leone</dd>
  <dd>Rose Iams</dd>
  <dd>Edie Savignac</dd>
</dl>
<dl>
  <dt>S.S. Supt.:</dt>
  <dd>Donna Brown</dd>
  <dt>Historian:</dt>
  <dd>Marilyn Brown</dd>
  <dt>Auditors:</dt>
  <dd>Rose Mathers</dd>
  <dd>Sara Hagel</dd>
  <dt>Evangelism &amp; Missions:</dt>
  <dd>Debbie Brown</dd>
  <dd>Rose Mather</dd>
  <dd>Marlene Owen</dd>
  <dd>Elizabeth Neal</dd>
</dl>
<p style="clear: both">&nbsp;</p>

Code:

dl {
	margin: 0 0 0 40px;
	padding: 0;
	list-style: none; /* remove bullets */
	width: 200px;
	float: left;
}
dt {
	margin: 0;
	padding: 1em 0 0 0;
	font-weight: bold;

}
dd {
	margin: 0;
	padding: 0 0 0 10px;
}

**Tom_K** · Sep 27, 2007 18:30

Originally Posted by Centauri

Alternately, if you wanted two complete columns like in the original site, you could split the list into two lists, and float each one so they are beside each other :

Code:

<dl>
  <dt>Clerk:</dt>
  <dd>Donna Brown</dd>
  <dt>Treasurer:</dt>
  <dd>Edie Savignac</dd>
  <dt>Assistant:</dt>
  <dd>Rose Iams</dd>
  <dt>Trustees:</dt>
  <dd>Robert Mather</dd>
  <dd>David Brown</dd>
  <dd>Michael Brown</dd>
  <dd>Raymond Guillet</dd>
  <dd>David A. Brown</dd>
  <dt>Deacons:</dt>
  <dd>Richard Brown</dd>
  <dd>Lawrence Coleman</dd>
  <dd>Clarence Neal</dd>
  <dd>Seth Owen</dd>
  <dd>Sheila Hayes</dd>
  <dd>Gerry Leone</dd>
  <dd>Rose Iams</dd>
  <dd>Edie Savignac</dd>
</dl>
<dl>
  <dt>S.S. Supt.:</dt>
  <dd>Donna Brown</dd>
  <dt>Historian:</dt>
  <dd>Marilyn Brown</dd>
  <dt>Auditors:</dt>
  <dd>Rose Mathers</dd>
  <dd>Sara Hagel</dd>
  <dt>Evangelism &amp; Missions:</dt>
  <dd>Debbie Brown</dd>
  <dd>Rose Mather</dd>
  <dd>Marlene Owen</dd>
  <dd>Elizabeth Neal</dd>
</dl>
<p style="clear: both">&nbsp;</p>

Code:

dl {
    margin: 0 0 0 40px;
    padding: 0;
    list-style: none; /* remove bullets */
    width: 200px;
    float: left;
}
dt {
    margin: 0;
    padding: 1em 0 0 0;
    font-weight: bold;

}
dd {
    margin: 0;
    padding: 0 0 0 10px;
}

Holy Smokes! This is it! Perfection! You folks are the greatest. I used the code you posted Centauri and Bang!.....it worked like a charm.

A profound thanks to all who have helped me here. This forum is truly amazing. I'm a novice at this but I can't wait to start studying up on all of the web dev info.

From The USA to Australia........I salute you!

**deronsizemore** · Sep 28, 2007 06:09

Originally Posted by markbrown4

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.

User Tag List

Thread: I need help with columns.

Thread Tools

Display

I need help with columns.

Bookmarks

Bookmarks

Posting Permissions