2 column text layout, text flowing between?

**Jezthompson12@nt** · Sep 18, 2007, 03:36

I wouldn't mind building a perfect 2 column text layout for use on each site i do and wondered whether it could be done with the text following between 2 columns like below.

Whats the best way to do this?

Just 2 divs bother floating left? Thinking what it about, what about the line in the middle?

3 divs, all floating left?

I'm assuming you would have to had put in the text for it to flow as you read between the columns?

**markbrown4** · Sep 18, 2007, 03:58

Well the CSS3 columns would be perfect - only Safari / Firefox and maybe Opera support it unfortunately.
http://www.css3.info/preview/multi-column-layout/ -> to whet your appetite

It depends what you want from your dividing line, if you don't mind the line reaching the full height of the left column just use a 1px solid border. You could also use a background image but it sounds like you're wanting to be able to re-use it for different heights.

Here's how I would do it:
I'm using a negative margin to prevent the columns to drop in IE from a rounding bug - see 50% + 50% = 101%! in FAQ
I'm also using the overflow method of clearing floats and forcing haslayout to clear the floats in IE.
I added the inner div so you could apply padding to it without effecting the layout of the columns.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.columns {
	overflow: hidden; /* Clear children */
	width: 100%; /* Clear children in IE */
}
.columns .left {
	float: left;
	width: 50%;
	border-right: 1px solid #EFEFEF;
}
.columns .right {
	float: left;
	width: 50%;
	margin-left: -2px;
}
.columns .inner { padding: 20px }
.columns .right .inner { padding-left: 22px }
</style>
</head>
<body>
<div class="columns">
  <div class="left">
  	<div class="inner">
    	<p>Sed egestas, lectus a sollicitudin imperdiet, ipsum leo sagittis sem, ac porttitor sapien nulla vitae justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Donec condimentum facilisis ante. Pellentesque arcu ligula, eleifend ut, semper in, tincidunt id, sapien. Donec at sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean sodales iaculis elit. Mauris dolor leo, lobortis nec, fringilla at, nonummy eu, nibh. Nunc neque dui, vestibulum ut, euismod eget, tincidunt ac, sapien. Sed sem mi, vehicula ut, aliquam eget, fringilla nec, odio. Integer metus sapien, pretium accumsan, vehicula vitae, scelerisque non, felis. Sed nibh. Ut turpis ante, lobortis sed, viverra vel, blandit eget, nibh. Duis mi urna, lobortis vitae, adipiscing vel, hendrerit a, leo. Vivamus viverra, elit pulvinar vestibulum tempor, nibh pede posuere pede, in auctor mi velit a elit. In nunc ante, ornare nec, feugiat in, dictum in, est. Fusce eu tortor. Morbi aliquam.</p>
    </div>
  </div>
  <div class="right">
  	<div class="inner">
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce facilisis est nec arcu. Sed sem. Praesent ut elit. Donec ultrices lacinia metus. Nam euismod. Praesent sit amet mi et justo commodo convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras vitae turpis auctor tortor bibendum congue. In viverra arcu eu erat. Maecenas orci eros, blandit eget, vulputate et, commodo mollis, quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce id purus. Curabitur in mauris vel mauris viverra ullamcorper. Ut rhoncus turpis ut dui. Suspendisse augue tellus, elementum id, gravida vel, gravida eu, dui. Fusce et nisi. Donec ornare ornare risus. Donec blandit facilisis diam. Donec blandit.</p>
  	</div>
  </div>
</div>
</div>
</body>
</html>

Hope it helps

**Jezthompson12@nt** · Sep 18, 2007, 04:00

Thanks i'll have a play with that

Natural flow between the columns cannot be done then?

**Paul O'B** · Sep 18, 2007, 04:35

Natural flow between the columns cannot be done then?

No it can't.

As Mark said this is proposed for CSS3 so you will have to wait about 10 years until IE implements it.

**markbrown4** · Sep 18, 2007, 04:58

I wrote a more in-depth answer here:
http://www.yellowshoe.com.au/tips/columns-again/

**Jezthompson12@nt** · Sep 19, 2007, 08:10

Originally Posted by markbrown4

I wrote a more in-depth answer here:
http://www.yellowshoe.com.au/tips/columns-again/

Thanks for that, i was wondering how flexible is it in regard to putting inside another frame.

i.e would it still work if put in a fixed width say 700px, or not because its done with %'s?

**markbrown4** · Sep 19, 2007, 16:15

Yes, this should be fine.

Code:

.columns {
	overflow: hidden; /* Clear children */
	width: 700px; /* Clear children in IE */
}

Or you can leave it as 100% if it is within another fixed width container.
I'm pretty sure a width given in percentages is calculated relative to width of the parent. - Though I think this has tripped me up before when I haven't cleared my floats - The floats escape the parent container and then the width is calculated relative to it's new parent.
The clearing method for IE is simply forcing hasLayout, so any dimension will work (height or width) - it doesn't need to be 100% - It's just that this value won't hve any adverse effects it in any browser so no hacks are neccessary.

The SitePoint Forums have moved.

User Tag List

Thread: 2 column text layout, text flowing between?

Thread Tools

Display

2 column text layout, text flowing between?

Bookmarks

Bookmarks

Posting Permissions