Fixed Width, 2 Column Centered Layout

Forum Moderators: not2easy

Message Too Old, No Replies

Fixed Width, 2 Column Centered Layout

prattboy

1:03 pm on May 17, 2004 (gmt 0)

I'm a newbie when it comes to using CSS for layout. I understand how to layout a page using tables, but am ready to move on and begin using CSS and XHTML... so here's the deal:

I'm trying to create a two-column, fixed-width layout that is centered, kind of like this:
Ś Header Ś
-------------
ŚLeft----Ś RŚ
Ś--------Ś--Ś
Ś--------Ś--Ś
Ś--------Ś--Ś
-------------
But I'm stuck. I've figured out how to place the header image where I want it using margins and text-center. But how do I create these two columns and center them? I've played around quite a bit and can get columns whose positions are liquid based on the browser window size by using "left" and "right" positioning. Anyone that can help me get started with some example code?

Thanks in advance.

D_Blackwell

2:16 pm on May 17, 2004 (gmt 0)

This is one of several options. Other choices will become clearer as you investigate CSS. (For greater control, I would almost always put the left column in its own id, with this setup.)
<head>
<style type="text/css">
#mainbox {
margin: 0 10%; border: .1em solid #000;
}
#rightcol {
width: 25%; float: right;
}
</style>
</head>
<body>
<div id="mainbox">
<div id="rightcol">
rightcol text...
</div>
Leftcol text
</div>

[edited by: D_Blackwell at 4:09 pm (utc) on May 17, 2004]

Bonusbana

2:35 pm on May 17, 2004 (gmt 0)

Do a search on google or in theese forums for css 2-column layout, there are many examples out there.

Here is an easy one on the fly:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>2-column fixed width example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

body {
margin: 0;
padding: 0;
text-align: center; /*centers the content in IE5/win */
background: #fff;
}

#wrap {
width: 700px;
margin: 0 auto; /*centers the div in standard browsers */
text-align: left;
}

#left {
float:left;
width: 200px;
background: #eee;
}

#main {
margin: 0 0 0 220px;
width: 480px;
background: #eee;
}

</style>
</head>
<body>

<div id="main"> 
<h3>Main content</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>

</div>

</body>
</html>

prattboy

4:04 pm on May 17, 2004 (gmt 0)

Aha! "Float" was the ingredient that I was missing in all of this. Gotta read up on CSS syntax some more.

Thanks for the help.