CSS - How can I add left and right columns?

SgtM · 02-07-09, 06:37 AM

So I'm going to rework my web site a bit with this template. I want to add left and right columns. One for google ads, the other for freebie badges. While I know a little HTML, I'm clueless when it comes to CSS. I managed to get a column inserted early this morning, but it shifted everything else down. Any help at all would be appreciated, even if it's a link to a good tutorial (which I've looked for).

mattyb · 02-07-09, 06:50 AM

Create a definition for a column in css like:
#leftcolumn {width:200px; height:200px; float:left;}
#rightcolumn {width:200px; height:200px; float:right;}

Then in your mark up simply:
<div id="leftcolumn>Your content</div>
<div id="rightcolumn>Your content</div>

If that isn't working correctly you'll probably need to contain them within a parent wrapper:
#wrapper {width:600px; height:auto;}

Mark up then becomes:
<div id="wrapper>
<div id="leftcolumn>Your content</div>
<div id="rightcolumn>Your content</div>
</div>

hope that helps.

chigley · 02-07-09, 08:38 AM

To add to mattyb's post (and correct his HTML

):

Code:

<style type="text/css">
	#wrapper {width:600px; height:auto;}
	#leftcolumn {width:200px; height:200px; float:left;}
	#rightcolumn {width:200px; height:200px; float:right;}
	.clear {clear: both;}
</style>

<div id="wrapper">
	<div id="leftcolumn">Your content</div>
	<div id="rightcolumn">Your content</div>

	<div class="clear"></div>

	You can now add more content here, undearneath the columns, without needing a new division.
</div>

mattyb · 02-07-09, 09:32 AM

well spotted Chigley.
Clear fix is a good addition SgtM

chigley · 02-07-09, 09:49 AM

Quote:

Originally Posted by mattyb

well spotted Chigley.
Clear fix is a good addition SgtM

I thought you were calling me sergeant major before I realised that that's the OP

SgtM · 02-07-09, 12:46 PM

Well, it's closer..

without:

with:

The banners I'm testing with are 200x600, though the final product probably won't be that big. Thanks for helping me with this guys. I really appreciate it.

Some code:
HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Free Gifts 4U</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="wrapper">
	<div id="leftcolumn"><img src="images/banner.gif"></div>
	<div id="rightcolumn"><img src="images/banner.gif"></div>
<div class="clear"></div>

<div id="topPanel">

CSS

Code:

/* CSS Document */

body{background:#fff; color:#0F0F0F; font:15px/20px Arial, Helvetica, sans-serif; margin:32px 0 0; padding:0;}
div, ul, h1, h2, h3, li, p, img{margin:0; padding:0;}
ul{list-style-type:none;}

<style type="text/css">
	#wrapper {width:200px; height:auto;}
	#leftcolumn {width:200px; height:600px; float:left;}
	#rightcolumn {width:200px; height:600px; float:right;}
	.clear {clear: both;}
</style>


/* TOP PANEL*/

mattyb · 02-07-09, 01:49 PM

Your wrapper will need to be as wide as than the sum of the two columns which need to be as wide as the content you will place within them.
You have the wrapper set as 200px as well as containing two columns each of 200px meaning you're 200 short.
If your content is going to be 600px wide (for example) make that the width of wrapper and then divide the left and right columns accordingly.

Also you don't need this if you're already using a separate style sheet:
<style type="text/css">
...
...
</style>
That's only if it's at the top of an HTML page.

SgtM · 03-07-09, 07:31 AM

Thanks mattyb. Unfortunately, the columns are pushing everything down now, with the columns appearing only on the left side. It's staying aligned, but it's being pushed down. Anyway, I'm going to rework this, and have images mixed in with text I think. +rep to you and Chigley for jumping in and helping.

02-07-09, 06:37 AM	#1
SgtM iPod Nano 4GB Join Date: Dec 2008 Location: Ohio Posts: 249	CSS - How can I add left and right columns? So I'm going to rework my web site a bit with this template. I want to add left and right columns. One for google ads, the other for freebie badges. While I know a little HTML, I'm clueless when it comes to CSS. I managed to get a column inserted early this morning, but it shifted everything else down. Any help at all would be appreciated, even if it's a link to a good tutorial (which I've looked for).

02-07-09, 06:50 AM	#2
mattyb iPod 20gb Join Date: May 2009 Location: Sussex Posts: 505	Create a definition for a column in css like: #leftcolumn {width:200px; height:200px; float:left;} #rightcolumn {width:200px; height:200px; float:right;} Then in your mark up simply: <div id="leftcolumn>Your content</div> <div id="rightcolumn>Your content</div> If that isn't working correctly you'll probably need to contain them within a parent wrapper: #wrapper {width:600px; height:auto;} Mark up then becomes: <div id="wrapper> <div id="leftcolumn>Your content</div> <div id="rightcolumn>Your content</div> </div> hope that helps.

02-07-09, 09:32 AM	#4
mattyb iPod 20gb Join Date: May 2009 Location: Sussex Posts: 505	well spotted Chigley. Clear fix is a good addition SgtM

02-07-09, 01:49 PM	#7
mattyb iPod 20gb Join Date: May 2009 Location: Sussex Posts: 505	Your wrapper will need to be as wide as than the sum of the two columns which need to be as wide as the content you will place within them. You have the wrapper set as 200px as well as containing two columns each of 200px meaning you're 200 short. If your content is going to be 600px wide (for example) make that the width of wrapper and then divide the left and right columns accordingly. Also you don't need this if you're already using a separate style sheet: <style type="text/css"> ... ... </style> That's only if it's at the top of an HTML page.

03-07-09, 07:31 AM	#8
SgtM iPod Nano 4GB Join Date: Dec 2008 Location: Ohio Posts: 249	Thanks mattyb. Unfortunately, the columns are pushing everything down now, with the columns appearing only on the left side. It's staying aligned, but it's being pushed down. Anyway, I'm going to rework this, and have images mixed in with text I think. +rep to you and Chigley for jumping in and helping.