Add another column to my page

geoldr · August 10, 2008

Hey all, so I am a PHP coder, not a HTML / CSS designer. I need some help adding another column to my website.

Right now it has a column on the right. You can check out my site at www.bayareahangout.com

But yeah, I want to add another column to the left.

So its like

Left>Page Content>Right

Here is the CSS

html {min-height: 100%;}

* {
margin: 0;
padding: 1;
}

a {color: #963;}
a:hover {color: #C60;}

body {
background: #CCD8E0 url(../../images/theme/bg.jpg) repeat-x left bottom;
color: #444;
font: normal 62.5% Tahoma,sans-serif;
}

p,code,ul {padding-bottom: 1.2em;}

li {list-style: none;}

h1 {
font: normal 1.8em Tahoma,sans-serif;
margin-bottom: 4px;
}

code {
background: #FFF;
border: 1px solid #EEE;
border-left: 6px solid #C1CAD3;
color: #666;
display: block;
font: normal 1em Tahoma,sans-serif;
line-height: 1.6em;
margin-bottom: 12px;
padding: 8px 10px;
white-space: pre;
}

blockquote {
background: url(../../images/theme/quote.gif) no-repeat;
display: block;
font-weight: bold;
padding-left: 28px;
}

h1,h2,h3 {padding-top: 6px;}

/* misc */
.clearer {clear: both;}

.left {float: left;}

.right {float: right;}

/* structure */
.container {
background: #FFF;
font-size: 1.2em;
margin: 0 auto;
padding: 0 10px 10px;
width: 780px;
}

/* header */
.top {
/*background: url(img/clouds.gif) repeat-x;*/
padding: 50px 10px 0;
}

/* title */
.header {
background: #FFF;
font-size: 1.2em;
height: 150px;
margin: 0 auto;
padding: 10px 10px 5px;
width: 780px;
}
.header .left, .header .right {
background: #A4A4A0;
color: #FFF;
height: 150px;	
}
.header .left {
background: #B3C2C7 url(../../images/theme/header2.jpg) no-repeat;
font: normal 2.8em "Trebuchet MS",sans-serif;
line-height: 150px;
text-align: center;	
width: 564px;
}
.header .right {
overflow: auto;
width: 212px;
}
.header .right p,.header .right h2 {padding: 0 16px;}
.header .right h2 {padding-top: 16px; font: normal 1.6em "Trebuchet MS",sans-serif;}

/* navigation */
.navigation {	
background: #D9E1E5 url(../../images/theme/nav.gif);
border: 1px solid #DFEEF7;
border-color: #DFEEF7 #CFDEE7;
height: 41px;
}
.navigation a {
background: #D9E1E5 url(../../images/theme/nav.gif);
border-right: 1px solid #AFBEC7;
color: #456;
display: block;
float: left;
font: bold 1.1em sans-serif;
line-height: 41px;
padding: 0 20px;
text-decoration: none;
}
.navigation a:hover {background-position: left bottom; color: #234;}

/* main */
.main {
border-top: 4px solid #FFF;
background: url(../../images/theme/bgmain.gif) repeat-y;
}

/* sub navigation */
.sidenav {
float: right;
width: 210px;
}
.sidenav h2 {
color: #5A5A43;
font-size: 1em;
line-height: 30px;
margin: 0;
padding-left: 12px;
}
.sidenav ul {
padding: 0;
border-top: 1px solid #EAEADA;
}
.sidenav li {border-bottom: 1px solid #EAEADA;}
.sidenav li a {
font-size: 1.1em;
color: #554;
display: block;
padding: 8px 0 8px 5%;
text-decoration: none;
width: 95%;
}
.sidenav li a:hover {
background: #F0F0EB;
color: #654;	
}

/* content */
.content {
float: left;
margin: 10px 0;
padding: 0 16px;
width: 531px;
}
.content .descr {
color: #664;
font-size: 0.9em;
margin-bottom: 6px;
}
.content li {
list-style: url(../../images/theme/li.gif);
margin-left: 18px;
}
.content p {font-family: "Lucida Sans Unicode",sans-serif;}

/* footer */
.footer {
background: url(../../images/theme/bgfooter.gif) repeat-x;
color: #FFF;
font: bold 1em sans-serif;
line-height: 39px;
text-align: center;
}
.footer a,.footer a:hover {color: #FFF;}

And here is a template file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="description"/>
<meta name="keywords" content="keywords"/> 
<meta name="author" content="George Babichev"/> 
<link rel="stylesheet" type="text/css" href="theme/style.css" media="screen"/>
<title>BayAreaHangout.com</title>
</head>

<body>

<div class="top">			
<div class="header">
	<div class="left">

	</div>
	<div class="right">
		<h2>Welcome!</h2>
		<p>BayAreahangout.com is a great place to meet new people,
		hang out, and just have fun!</p>
	</div>
</div>	
</div>
<div class="container">	
<div class="navigation">
	<a href="../index.php">Home</a>
	<a href="../forum_index.php">Forums</a>
	<a href="../blog_index.php">Blogs</a>
	<a href="../memberlist.php">Memberlist</a>
	<a href="../about.php">About Us</a>
	<div class="clearer"><span></span></div>
</div>
<div class="main">		
	<div class="content">
	<Main page content

		</div>
		<div class="sidenav">

</div>
	<div class="clearer"><span></span></div>
</div>
<div class="footer">
BayAreahangout.com
</div>

</div>
</body>
</html>

MasterACE14 · August 10, 2008

basically you just do something like this:

#leftcolumn {
float: left;
}
#content {
float: left;
}
#rightcolumn {
float: left;
}

that way they push each other from the right to the left.

leftcolumn < content < rightcolumn

you put them on the page like so:

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

haku · August 10, 2008

The above method will work with fixed-width colums. But if you want to have the middle column to be a fluid width, this method can work well: http://www.alistapart.com/articles/holygrail

Sign In

Add another column to my page

Recommended Posts

geoldr

Link to comment

Share on other sites

MasterACE14

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information