creating a fluid 2 column layout?

**CraniumDesigns** · Sep 6, 2007, 09:46

so say i want a page with 2 columns equally taking up half the width of the page, with 40 pixels of space on the sides of them, and 40 pixels of space BETWEEN them, like this:

40px , * , 40px , * , 40px

this is easy on fixed width layouts, but i'm not sure how to go about this with a fluid layout.

**Dan Schulz** · Sep 6, 2007, 13:31

Your left column will need to have a child container have 40px of left padding and 20px of right padding, with the right column being reversed (20px of left padding, 40px of right padding on the child container).

Or replace with margins if you prefer.

Then from there, float the left column left, give both columns (the parent ones) a width of 50% and apply a -1px right margin to the left parent column.

Bear in mind I cannot test this out since I'm installing updates to a fresh install of Windows XP Pro, but it should work.

**CraniumDesigns** · Sep 6, 2007, 13:35

ok, i think i got it. but what does the -1px margin for the left parent column do? prevent the right column from dropping below the left column?

**CraniumDesigns** · Sep 6, 2007, 13:48

ok i did this... didn't work. they just lay on top of each other...

Code:

<style type="text/css" media="all">

#leftColumn {float:left; width:50&#37;; margin: 0 -1px 0 0; padding:0;}
#rightColumn {width:50%; margin:0; padding:0;}
#leftColumnChild {margin:0 20px 0 40px; padding:0;}
#rightColumnChild {margin:0 40px 0 20px; padding:0;}

</style>
</head>
<body>
<div id="leftColumn">
  <div id="leftColumnChild">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean quis justo ut metus semper vehicula. Donec consequat. Curabitur metus mauris, pharetra id, viverra nec, porta quis, dolor. Suspendisse bibendum vulputate tortor. Donec laoreet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras sollicitudin. Praesent porta sem sit amet massa. Morbi facilisis interdum nunc. Nunc elementum tortor. Nullam arcu eros, bibendum viverra, tincidunt auctor, faucibus et, urna. Vestibulum id metus. Suspendisse gravida. Nullam placerat, risus sit amet fermentum cursus, lacus risus sodales lorem, et tincidunt velit justo a ligula. Vivamus nisi orci, volutpat et, pretium vitae, semper ac, odio. Donec tempus. Aenean vulputate feugiat elit.</p>
  </div>
</div>
<div id="rightColumn">
  <div id="rightColumnChild">
    <p>Suspendisse libero diam, ultrices non, iaculis quis, facilisis et, lorem. Aliquam ac diam. Praesent molestie turpis id massa. Donec tellus turpis, interdum vel, faucibus at, egestas elementum, magna. Vestibulum tortor. Maecenas lobortis. Sed ligula libero, tristique vel, pulvinar malesuada, pellentesque vel, est. Fusce dictum nonummy libero. Fusce imperdiet, leo eget semper condimentum, enim nisl molestie nisl, eget condimentum nulla turpis id quam. Mauris commodo, lacus at iaculis dignissim, elit metus semper neque, a dapibus sapien lacus ut neque. Integer turpis. Mauris purus enim, tristique eu, viverra ut, interdum faucibus, nulla. Aenean tempor sapien vitae quam fringilla laoreet. Donec posuere luctus urna. Etiam auctor libero et augue. Maecenas enim lorem, dapibus id, laoreet quis, vulputate in, dui.</p>
  </div>
</div>

**Dan Schulz** · Sep 6, 2007, 13:58

It prevents a calculating error in Internet Explorer and a couple other browsers (IIRC, even including some versions of Konqueror and iCab).

Oh, and I do apologize. I forgot to mention to float the right column to the right as well.

You can see it in action here:

HTML 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" xml:lang="en" lang="en">
<head>
	<title>XHTML/CSS Template for Steve Davis</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="imagetoolbar" content="no" />
	<style type="text/css">
	
	* {
		margin: 0;
		padding: 0;
	}
	
	#column1 {
		background: #FCC;
		color: #000;
		float: left;
		margin-right: -1px;
		width: 50&#37;;
	}
		#column1 .wrapper {
			margin: 0 20px 0 40px;
			padding: 40px 0;
		}
	
	#column2 {
		background: #CCF;
		color: #000;
		float: right;
		width: 50%;
	}
		#column2 .wrapper {
			margin: 0 40px 0 20px;
			padding: 40px 0;
		}
	</style>
</head>
<body>
<div id="column1">
	<div class="wrapper">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean quis justo
		ut metus semper vehicula. Donec consequat. Curabitur metus mauris, pharetra
		id, viverra nec, porta quis, dolor. Suspendisse bibendum vulputate tortor.
		Donec laoreet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
		Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
		inceptos hymenaeos. Cras sollicitudin. Praesent porta sem sit amet massa.
		Morbi facilisis interdum nunc. Nunc elementum tortor. Nullam arcu eros,
		bibendum viverra, tincidunt auctor, faucibus et, urna. Vestibulum id metus.
		Suspendisse gravida. Nullam placerat, risus sit amet fermentum cursus, lacus
		risus sodales lorem, et tincidunt velit justo a ligula. Vivamus nisi orci,
		volutpat et, pretium vitae, semper ac, odio. Donec tempus. Aenean vulputate
		feugiat elit.
	</div>
</div>
<div id="column2">
	<div class="wrapper">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean quis justo
		ut metus semper vehicula. Donec consequat. Curabitur metus mauris, pharetra
		id, viverra nec, porta quis, dolor. Suspendisse bibendum vulputate tortor.
		Donec laoreet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
		Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
		inceptos hymenaeos. Cras sollicitudin. Praesent porta sem sit amet massa.
		Morbi facilisis interdum nunc. Nunc elementum tortor. Nullam arcu eros,
		bibendum viverra, tincidunt auctor, faucibus et, urna. Vestibulum id metus.
		Suspendisse gravida. Nullam placerat, risus sit amet fermentum cursus, lacus
		risus sodales lorem, et tincidunt velit justo a ligula. Vivamus nisi orci,
		volutpat et, pretium vitae, semper ac, odio. Donec tempus. Aenean vulputate
		feugiat elit.
	</div>
</div>
</body>
</html>

**CraniumDesigns** · Sep 6, 2007, 14:10

thanks a lot for all your extra effort. would this work too? seems to work ok for me on FF, IE 5, and Safari.

Code:

<style type="text/css" media="all">

* {margin:0; padding:0;}
body {padding:40px 0;}
#leftColumn {float:left; width:50&#37;; margin 0 -1px 0 0; padding:0;}
#rightColumn {margin:0 0 0 50%; padding:0;}
#leftColumnChild {margin:0 20px 0 40px; padding:0;}
#rightColumnChild {margin:0 40px 0 20px; padding:0;}

</style>

**Dan Schulz** · Sep 6, 2007, 14:24

It would, but it uses more code than I like (for example, why re-declare all padding values to be zero when the universal selector already did so?).

I floated the right column to the right just to make it easier for people who aren't familiar with floats and margins to understand.

**CraniumDesigns** · Sep 6, 2007, 14:26

ah yeah, i didn't mean to include the superfluous padding declarations. too much in a hurry.

so which method would u recommend? floating it right or not floating it and just add a large left margin like that?

**Paul O'B** · Sep 6, 2007, 14:34

You'll get the 3 pixel jog in IE when you use a float next to static content so Dan's method is better

**Dan Schulz** · Sep 6, 2007, 14:37

I forgot about the 3px jog.

**CraniumDesigns** · Sep 6, 2007, 14:42

ok, i'll just float to the right, but what's the 3 pixel jog?

**Dan Schulz** · Sep 6, 2007, 14:52

It's three pixels of margins that are added when you float an element. I don't recall exactly what triggers it, though there is a discussion and explaination about it in the CSS FAQ right here in the SitePoint forums.

**Paul O'B** · Sep 6, 2007, 15:40

As Dan said theres a FAQ about this under the float topic.

Any static content alongside a float will suffer from the 3 pixel jog and is a mysterious 3 pixels that IE applies between the float and the static content alongside. When the static content is below the float the column suddenly jogs back in by 3px - hence the 3px jog. This is a menace to cure and needs almost a three pronged attack to squash the bug which is why I advise floating both columns and avoiding the bug altogether.

User Tag List

Thread: creating a fluid 2 column layout?

Thread Tools

Display

creating a fluid 2 column layout?

Bookmarks

Bookmarks

Posting Permissions