Arranging text in two column fashion CSS Question

Question Arranging text in two column fashion ( SitePoint Forums CSS )
Updated: 2008-11-23 05:55:01 (7)

Arranging text in two column fashion

I'm working on a page of a site located at http://www.bluevolume.com/cst/a-bm.htm. As you can see, on the right side, there are two columns of text, one displaying the person's name, and the other showing his or her position. Is there a more efficient way to be coding this? It just seems like the way I have it set up has alot of extra code, and I'm thinking that using a table for this may just be a better option (because it is after all just data). I also can't figure out how to control the vertical space between names; the margin and padding attributes don't seem to have an effect. And lastly I'm getting a weird affect on the bottom where the black border line of the main right column extends all the way down to the bottom of my "created by..." image (where on other pages like http://www.bluevolume.com/cst/a-h.htm it doesn't - as it should).

Any help you can give would be appreciated.

Just so you don't have to go hunting for it, the CSS relative to the two columns of text is shown below:

Code:

.name {margin: 0 0 0 10px; width: 200px; float:left;}
.info {float:left;}
.clear {clear:both;}

Answers: Arranging text in two column fashion ( SitePoint Forums CSS )

Arranging text in two column fashion

Hi,

Well its all to do with margins and padding and clears.

This is the nearest I can get both because of the way moz handles clear. The only difference I can see now is that the black divider line is slightly longer in moz however the text seems to line up the same.

Code:

#maincol h3 {
margin: 15px 0 5px 10px;
font: bold .9em "Trebuchet MS",Arial,Sans-serif;
text-transform: uppercase;
color: #000;
clear:both;
}
dl {margin: 0 0 0 10px; width: 400px; float:left;text-align:left;}
html>body dl {margin-bottom:15px}
dt {float:left;width:150px;margin-bottom:0;padding-bottom:0;}
dd {float:left;width:200px;margin-bottom:0;padding-bottom:0}
.clear {clear:both;height:1px;overflow:hidden} 
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
a#createdby img {border:0; margin: 10px 0 0 0;}
html>body a#createdby img {margin-top:0}

Code:

<body>
<div id="container" class="clearfix"> 
etc......
...........
 
		<dd>Sisterhood President</dd>
	 </dl>
	<div class="clear"></div>
</div>
	<a href="http://www.bluevolume.com" id="createdby"><img src="http://www.bluevolume.com/cst/i/createdby.gif" alt="created by bluevolume" /></a> 
</div>
<!-- clear taken out here -->
</div>
</body>
</html>

You may be able to get the line to reduce by using a negative margin or something similar on the clear.

Hope that helps anyway its a bit closer

Paul

Paul O'B

Arranging text in two column fashion

Tabular data? Yes.

Can it be represented in a <dl>? Yes.

I'd go for the table personally, but these CSS experiments are always fun .

vgarcia

Arranging text in two column fashion

Quote:

Originally Posted by vgarcia

Tabular data? Yes.

Can it be represented in a <dl>? Yes.

I'd go for the table personally, but these CSS experiments are always fun .

What is a <dl>? I've seen it a lot, but never knew what it stood for.

tempus

Arranging text in two column fashion

Hi,

You can control the margins of the h3 and h2 to adjust the spacing between your headings and if you add clear:both to the headings you can get rid of one of your div class="clear:" lines from the html
e.g.

Code:

#maincol .text h2 {margin:0;clear:both}
#maincol .text h3 {margin:0;clear:both}

Code:

  <div id="maincol"> 
	<div class="text"> 
	  <h2>Board Members</h2>
	  <h3>Executive Board Members:</h3>
	  <dl>
		<dt>Michael Zucker</dt>
		<dd>President</dd>
		<dt>Jeffrey Fine</dt>
		<dd>Executive Vice President</dd>
		<dt>Karen Abramson</dt>
		<dd>Vice President Programming</dd>
		<dt>Cyril Sulski</dt>
		<dd>Vice President Operations</dd>
		<dt>Barbara Radunsky</dt>
		<dd>Vice President Membership</dd>
		<dt>Steven Rosenberg</dt>
		<dd>Treasurer</dd>
		<dt>Sharon Lipinsky</dt>
		<dd>Secretary</dd>
		<dt>Paul Geller</dt>
		<dd>Gabbai Rishon</dd>
	  </dl>
<!-- snip -->	 
 <h3>General Board Members:</h3>

You still need to add position:relative but it needs to go in the text class as the divider line isn't being redrawn when scrolled.

Code:

.text {border-left: 3px solid #000; text-align: 
left;position:relative;}

A dl,dt,dd combination is used for data lists that have data terms with a data definitions.

Usually you would use them like this:

Heading
Defintion/ description of headin
e.g.
Cascading Style Sheets (CSS)
CSS is use to separate presentation from content etc.........

It can be used as in your example where you have a name and then a job description etc but is usually used in situations where more information will be conveyed to the user.

http://www.w3.org/TR/REC-html40/stru...ts.html#h-10.3

Paul

Paul O'B

Arranging text in two column fashion

Well your solution worked to get rid of the large amount of space between the two board lists, but the extra space on the bottom is still there. In addition, it looks like there is no space between the lists in firefox. Any ideas?

tempus

Arranging text in two column fashion

Hi,

You could use a dl instead which may be more semantically correct.

I've oonly done this quickly on some of the item so you may need to tie up the loose ends etc.
e.g.

Code:

dl {margin: 0 0 0 10px; width: 400px; float:left;text-align:left;}
dt {float:left;width:180px;}
dd {float:right;width:180px;}

Code:

  <div id="maincol"> 
	<div class="text"> 
	  <h2>Board Members</h2>
	  <dl>
		<dt>Michael Zucker</dt>
		<dd>President</dd>
		<dt>Jeffrey Fine</dt>
		<dd>Executive Vice President</dd>
		<dt>Michael Zucker</dt>
		<dd>President</dd>
		<dt>Jeffrey Fine</dt>
		<dd>Executive Vice President</dd>
	  </dl>
	  <div class="clear">&nbsp;</div>
 </div>
	<a href="http://www.bluevolume.com" id="createdby"><img src="http://www.bluevolume.com/cst/i/createdby.gif" alt="created by bluevolume" /></a> 
  </div>
  <br style="clear:both" />
</div>

It seems ie needs the non breaking space in the clearing div to extend the border. You could add another break which will do the trick but both are hacks anyway.

It looks like you need a position:relative in maincol as there seems to be re-draw problems. Sorry I haven't tested fully but I'm a bit short on time today

Paul

Paul O'B

Arranging text in two column fashion

Paul, I used your idea and uploaded the page. If you look at it again you can see two main problems (which are probably related). The first is that the space above the heading "General Board Members" is too large, and after the lest general board member, there is that extra space that the black border extends to, which should not be there.

tempus

- Source: Arranging text in two column fashion SitePoint Forums CSS
- Previous Question: Grouping forums like on this quot Board Index quot phpBB phpBB 3.0.x 3.0.x Support Forum
- Next Question: Registration Error phpBB phpBB 3.0.x 3.0.x Support Forum