sourced ordered three-column layout

**artcoder** · Oct 18, 2007 13:45

Do anybody know how to accomplish a three-column layout with the following characteristics?

1) The design (container of the three column) take up 100% width of browser.
2) The left column is fixed width at say 240px;
3) The right column is fixed width at 160xp;
4) The middle column is fluid and takes up the remainder of the screen real estate.
5) And here is the tricky part... The content of the middle column must come before the left and right content in source order.

I have yet to find this layout. If you believe this is impossible, let me know too. Because I am curious to see how close to impossible this is.

**Raffles** · Oct 18, 2007 14:11

Not impossible at all.

HTML Code:

<div id="content">Middle column with content</div>
<div id="left">Left column</div>
<div id="right">Right column</div>

Code CSS:

#content {
  margin:0 160px 0 240px;
}
#left, #right {
  position:absolute;
  top:0;
}
#left {
  left:0;
  width:240px;
}
#right{
  right:0;
  width:160px;
}

If you are going to want borders or padding in your columns, then you will need to adjust the margins in the container accordingly. And the container for these three is just the BODY. No need for a containing DIV.

**artcoder** · Oct 18, 2007 14:46

Gee, thanks. That's "absolutely" right (pun intended).

I was so busy thinking about "floats", I forgot all about absolute positioning.

**Dan Schulz** · Oct 18, 2007 15:15

Actually it can be done with floats and negative margins.

Hang on a sec and I'll show you.

**Dan Schulz** · Oct 18, 2007 15:38

And here we go:

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>3 Column Content First Float Based Layout</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;
	}

	#container {
		background: #CFC;
		height: 1&#37;;			/* fixes IE hasLayout bug */
		overflow: hidden;	/* this allows the greenish background to show behind all the columns */
	}

	#content {
		float: left;
		width: 100%;
	}
		#content .wrapper {
			background: #FC6;
			margin: 0 160px 0 240px;
			padding: 0.25em 0;
		}
	
	#left {
		background: #FCF;
		float: left;
		margin-left: -100%;
		padding: 0.25em 0;
		width: 240px;
	}

	#right {
		background: #CCC;
		float: left;
		margin-left: -160px;
		padding: 0.25em 0;
		width: 160px;
	}

	p {
		padding: 0.25em 0.5em;
	}


	</style>
</head>
<body>
<div id="container">
	<div id="content">
		<div class="wrapper">
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae dolor quis diam
				sodales sodales. Quisque massa leo, sagittis sed, rhoncus vitae, convallis nec, orci.
				Fusce lorem. Nullam ac dui. Mauris quis risus. Mauris volutpat. Ut sollicitudin magna
				ac arcu. Aliquam velit. Donec commodo tempus urna. Mauris mi purus, rutrum vel, aliquet
				ut, faucibus eget, purus. Phasellus tellus libero, iaculis ut, tempor malesuada,
				elementum et, urna. Proin vehicula viverra sapien. Integer eleifend, tortor et
				hendrerit vulputate, lectus enim pharetra risus, quis blandit nibh dui sed neque. Nunc
				nec odio vel odio porta fermentum. Sed quis arcu. Donec tristique scelerisque nibh. Nam
				lacinia libero a sem. Nunc volutpat, dui rutrum euismod sodales, ipsum dui accumsan
				libero, id consequat quam lorem vitae orci.
			</p>
			<p>
				Cras eu justo. Duis ornare ultrices urna. Integer eros. Nulla sagittis viverra purus.
				Sed massa quam, eleifend hendrerit, laoreet vel, auctor sit amet, nunc. Donec
				scelerisque. Cras sodales. Nulla facilisi. Ut molestie. Quisque rhoncus, nulla non
				auctor tincidunt, lectus sapien laoreet metus, non laoreet elit purus sollicitudin
				nulla. Praesent eget lacus sit amet sem elementum molestie. Etiam mattis eros quis
				libero.
			</p>
			<p>
				Vestibulum et massa. Cras pharetra metus ut quam. Fusce ac lectus. Nunc quis nibh ut
				tellus placerat mattis. Duis mi dolor, pharetra at, consectetuer in, aliquet eget,
				lacus. Ut malesuada mi sed ipsum. Integer tristique libero et lacus. Duis hendrerit,
				lectus sit amet porta rhoncus, ipsum quam placerat nunc, ac porta quam turpis ut erat.
				Vestibulum molestie, metus sit amet malesuada eleifend, lorem est dignissim nibh, a
				imperdiet turpis mauris a tortor. Nam porttitor lacus sed tellus. Phasellus tempus. In
				hac habitasse platea dictumst. Vivamus magna. In in sem. Morbi tristique metus at magna.
				Sed luctus laoreet turpis. Curabitur egestas varius nibh. Fusce condimentum pretium
				augue. Nam sollicitudin rutrum turpis. Quisque imperdiet.
			</p>
		</div>
	</div>
	<div id="left">
		<p>
			Some left sidebar content goes here.  Keep it simple, yet appropriate.  Do not go
			on an ego trip.
		</p>
		<p>
			Some left sidebar content goes here.  Keep it simple, yet appropriate.  Do not go
			on an ego trip.
		</p>
	</div>
	<div id="right">
		<p>
			Some right sidebar content goes here.  Keep it simple, yet appropriate.  Do nott go
			on an ego trip.
		</p>
		<p>
			Some right sidebar content goes here.  Keep it simple, yet appropriate.  Do nott go
			on an ego trip.
		</p>
		<p>
			Some right sidebar content goes here.  Keep it simple, yet appropriate.  Do nott go
			on an ego trip.
		</p>
	</div>
</div>
</body>
</html>

**Paul O'B** · Oct 18, 2007 15:50

Or even simpler

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>3 col content first</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
*{padding:0;margin:0;}
body{padding:0 160px 0 240px;}
#left{
    width:240px;
    margin-left:-240px;
    background:#ccc;
    float:left;
    display:inline;
}
#right{
    width:160px;
    margin-right:-160px;
    float:right;
    background:#ffffcc;
    display:inline;
}
#middle{
    width:100&#37;;
    background:#ffcccc;
    display:inline;
    margin-right:-100%;
    float:left;
}
#footer,#header{
    clear:both;
    border:1px solid #000;
    background:red;
    padding:25px 0;
    margin:0 -160px 0 -240px;
}

</style>
</head>
<body>
<div id="middle">
    <p>Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : </p>
    <p>Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : </p>
</div>
<div id="left">
    <p>left content goes here : left content goes here : left content goes here : left content goes here : left content goes here: left content goes here : left content goes here : left content goes here : left content goes here : left content goes here : left content goes here : left content goes here : left content goes here : </p>
</div>
<div id="right">
    <p>right content goes here : right content goes here : right content goes here : right content goes here : right content goes here : right content goes here : right content goes here : right content goes here : right content goes here : right content goes here : right content goes here : : </p>
</div>
<div id="footer">Footer</div>
</body>
</html>

Originally Posted by artcoder

I have yet to find this layout.

Well you didn't look very far then

The sticky at the top of the forum has examples of this and has been up there for about 4 years

http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm

**artcoder** · Oct 18, 2007 21:13

Wow. What at first I thought might be impossible, all three of you have proven me wrong. I knew I would get answers from sitepoint.

margin-left: -100%; That is a new one for me. I'll have to remember that.

**Dan Schulz** · Oct 18, 2007 22:35

Just remember that you can use negative values for margins, but not padding.

**geargolum** · Oct 19, 2007 05:45

Paul,

The display: inline; is that to prevent the The IE Doubled Float-Margin Bug?

**Paul O'B** · Oct 19, 2007 06:06

The display: inline; is that to prevent the The IE Doubled Float-Margin Bug?

Yes that's right

(but in the example I posted it seems that only the right float needs it.)

**piku** · Oct 19, 2007 13:05

Cool, this was another thing I was trying to research along w/ displaying #header then #content

It only gets sticky when there's margin-right on those columns (i.e. #left #right #center). I think it took me some time to display correctly on IE after using OTL's calculator. In my case it was tough because I have the following:

Code:

.container {width:1000px; margin:0 auto;}
.column {float:left; margin-right:10px;}
#content-primary {
    margin-left:240px;
    width:440px;
}
#content-secondary {
    margin-right:0;
    width:300px;
}
#content-tertiary {
    margin-left:-980px;
    width:220px;
}

(then using an IE filter w/ #content-primary { display:inline; })

Algo for markup:

Code:

<div class=container>
<div id=content>

<div id=content-primary class=column>...</div>
<div id=content-secondary class=column>...</div>
<div id=content-tertiary class=column>...</div>

</div>
</div>

The design called for 10px on the inside of .container, so I tried doing:

Code:

.container {margin:0 10px;}

But I think IE kept on messing up, so I went w/ what I have above. Anyways, just wanted to say it can get sticky =)

**Paul O'B** · Oct 19, 2007 13:52

Originally Posted by piku

The design called for 10px on the inside of .container, so I tried doing:

Code:
.container {margin:0 10px;}

That doesn't make sense

. Your container is 1000px wide so a 10px margin on either side will do nothing.

In a fixed width design then content first is simple and I have a very old example here.

http://www.pmob.co.uk/temp/3col-content-first.htm

If you wanted 10px space inside your container space then just adjust the positive and negative margins to suit. It's exactly the same thing unless i misunderstand you

OTL's calculator

What's that?

**piku** · Oct 19, 2007 15:40

Oops, it should be

Code:

#content {margin:0 10px;}

But like you said, its the same thing if we use pos/neg margins w/ the #content-X divs

In terms of OTL's calc, that should be PIE's One True Layout example-calculator... http://www.fu2k.org/alex/css/onetrue...le/interactive. Aaaah internet technology and acronyms =)

Meanwhile, thanks for the example Paul, I'll take a look and see how it compares to what I have done.

`Sherwin

**Paul O'B** · Oct 20, 2007 07:15

Aaaah internet technology and acronyms

lol - IC the OTL was a TLA

User Tag List

Thread: sourced ordered three-column layout

Thread Tools

Display

sourced ordered three-column layout

Bookmarks

Bookmarks

Posting Permissions