# Adding another column with CSS



## RegCom (Dec 22, 2005)

Hey, I really need help adding a third column to the following css code. If also you can make the width to 1024px, that would be great. Thanks in advance.


```
*
{
margin: 0px;
padding: 0px;
}

a:link {
	color: #D72020;
}

a:hover {
	text-decoration: none;
	color: #FF0000;
}

a:visited {
	color: #D72020;
}

body {
	
	background: #ffffff url(images/back_all.gif) repeat-x;
	font: 13px Arial, Helvetica, sans-serif;
	color: #333333;
}

#content
{
	margin: 0 auto;
	background: #ffffff;
	width: 811px;
	min-height: 900px;
	
}
#back_all
{
background: #ffffff url(images/white.gif);
}

#main
{
background: #ffffff url(images/white.gif);
}

#header {
	background: #ffffff;
	height: 244px;
	text-align: right;		
}

#menu
{
	float: left;
	padding-left: 320px;
	border-left: 7px solid #FFFFFF;
	width: 477px;
	background: url(images/header_top.gif) repeat-x;
}

#menu ul {
	list-style: none;
	
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	width: 52px;
	height: 46px;
	background: #FFFFFF url(images/header_top.gif) repeat-x;
	text-align: center;
	text-decoration: none;
	color: #D72020;
	font-weight: bold;
	font-size: 12px;
	padding-top: 35px;

}

#menu a:hover {
	width: 75px;
    height: 46px;
	text-decoration: underline;
	background: #FFFFFF url(images/header_top_over.gif) repeat-x;
}


#logo {
background: #ffffff url(images/header.gif) no-repeat;
width: 771px;
height: 98px;
float: left;
text-align: left;
padding-top: 60px;
padding-left: 40px;
}


#logo a {
	text-decoration: none;
	text-transform: lowercase;
	font-style: italic;
	font-size: 18px;
	color: #FFFFFF;
}
#logo H2 a
{
font-size: 12px;
}

#left
{
	float: left;
	padding: 10px;
	width: 240px;
	padding-right: 1em;
}

#left H3
{
width: 225px;
height: 25px;
font-size: 14px;
font-weight: bold;
padding-left: 15px;
padding-top: 15px;
text-transform: uppercase;
color: #ffffff;
background: url(images/title.gif) no-repeat
}

#left ul {
	list-style: none;
	border-bottom: 1px solid #D72020;
	border-left: 1px solid #D72020;
	border-right: 1px solid #D72020;
}

#left li ul {
	border: 0px;
	margin-left: 20px;
	margin-bottom: 10px;
}

#left li li {
	padding: 4px 20px;
    background: url(images/small.gif) no-repeat left;
}

#left a {
	color: #D72020;
}
#left a:visited {
	color: #D72020;
}

#left p
{
padding: 10px;
border-bottom: 1px solid #D72020;
border-left: 1px solid #D72020;
border-right: 1px solid #D72020;
}

#right
{
float: right;
width: 500px;
padding-right: 10px;
}

#right H4
{
	margin: 0;
	padding: 0px;
	font-size: 12px;
	color: #D72020;
}

#right a
{
color: #D72020;
text-decoration: none;
}

#right p {
	margin: 0;
	padding: 0;
	padding-bottom: 10px;
}

#right h2 {
	margin: 0;
	padding: 0;
	padding-top: 10px;
	color: #D72020;
}
.date {
	text-align: right;
	color: #808080;
	font-size: 11px;
	background-color: #fff;
}

.date a {
	color: #D72020;
	background-color: #fff;
}



#footer {
	text-align: center;
}

#footer p {
	margin: 0;
	font-size: 10px;
	text-align: center;
	color: #8E8E8E;
}

#footer a {
	color: #666666;
}

#gallery {
  padding:0; 
  margin:0; 
  list-style-type:none; 
  overflow:hidden; 
  width:240px; 
  height:240px; 
  border:1px solid #888; 
  background:#fff url(windows/win_back.gif);
  }
#gallery li {
  float:left;
  }
#gallery li a {
  display:block; 
  height:30px;
  width:240px; 
  float:left; 
  text-decoration:none; 
  border-bottom:1px solid #fff; 
  cursor:default;
  }
#gallery li a img {
  width:240px; 
  height:30px; 
  border:0;
  }
#gallery li a:hover {
  background:#eee; 
  height:239px;
  }
#gallery li a:hover img {
  height:239px;
  }
```


----------



## jamiemac2005 (Jul 5, 2007)

If you want help with this we'll need the HTML too, although we can understand whats going on in the css it means nothing without the HTML

Cheers,
Jamey


----------



## RegCom (Dec 22, 2005)

Ok here is the html


```
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Site Title</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="content">
	<div id="back_all">
<!-- header begins -->
<div id="header">
	<? include("top_menu.php"); ?>
	<div id="logo">
	</div>
</div>
<!-- header ends -->

<!-- content begins -->
 <div id="main">
 <!-- Left Bar begins -->
 <div id="left">
	<? include("news.php"); ?>
    <? include("link.php"); ?>
 </div>
 <!-- left bar ends -->
 <!-- center bar begin-->
	<div id="right">
         Content Here!!!
	</div>
<!-- center bar ends -->
<!-- right bar begans -->


<!--content ends -->

	</div>

	</div>
</div>

<!--footer begins -->
<div id="footer">
	<? include("footer.php"); ?>
</div>
<!-- footer ends-->

</body>
```


----------



## Jaxo (Feb 21, 2008)

Let's figure this thing out! :grin:

Code below is the div which figures how wide and tall your site is. If you want 1024px wide change it here. 
*Bolded* = changed.


```
#content
{
	margin: 0 auto;
	background: #ffffff;
	[B]width: 1024px;[/B]
	min-height: 900px;
	
}
```
Next will make sure all your ducks are in a row. Change your #right div id.


```
#right /* I would recommend changing name to #center for future troubleshooting */
{
[B]float: left[/B]; /* Changed from right */
width: 500px;
padding-right: 10px; 
}
```
Code below will get the third column in there for you. You may want to play around with the width and padding of the three to balance them out the way you want.


```
#theright
{
float: left;
width: 220px; /* Play with the sizes */
padding: 10px; /* Whatever padding will work */
}
```
Now this should work in theory. Without being in your mind and seeing exactly how you want the site layout this may or may not be what you are looking for. Hopefully this is it or brings you one step closer. If not, I would recommend a really basic site layout image you can upload. That will allow us to get you closer to what you want.

Hope that helps! Make sure you test in both FF And IE(oh fun!) for compatibility. :grin:


----------



## jamiemac2005 (Jul 5, 2007)

Looks like Jaxo beat me too it :grin:

Hope it all works fine for you,
Jamey


----------



## RegCom (Dec 22, 2005)

Thank You!! CSS is not my strong point in programming.


----------

