Adding another column with CSS

RegCom · 04-29-2008, 07:25 PM

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.

Code:

*
{
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** · 04-30-2008, 10:10 AM

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 · 04-30-2008, 04:48 PM

Ok here is the html

Code:

<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** · 05-01-2008, 01:26 AM

Let's figure this thing out!

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

Code:

#content
{
	margin: 0 auto;
	background: #ffffff;
	width: 1024px;
	min-height: 900px;
	
}

Next will make sure all your ducks are in a row. Change your #right div id.

Code:

#right /* I would recommend changing name to #center for future troubleshooting */
{
float: left; /* 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.

Code:

#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.

**jamiemac2005** · 05-01-2008, 06:20 AM

Looks like Jaxo beat me too it

Hope it all works fine for you,
Jamey

RegCom · 05-01-2008, 07:47 AM

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

04-30-2008, 10:10 AM	#2 (permalink)
jamiemac2005 Design Team Member Join Date: Jul 2007 Location: Coventry, UK Posts: 1,884 OS: Vista, various linux distros	Re: Adding another column with CSS 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

05-01-2008, 01:26 AM	#4 (permalink)
Jaxo Design Team Member Join Date: Feb 2008 Location: Deming, NM Posts: 312 OS: XP SP2 & Vista	Re: Adding another column with CSS Let's figure this thing out! Code below is the div which figures how wide and tall your site is. If you want 1024px wide change it here. Bolded = changed. Code: #content { margin: 0 auto; background: #ffffff; width: 1024px; min-height: 900px; } Next will make sure all your ducks are in a row. Change your #right div id. Code: #right /* I would recommend changing name to #center for future troubleshooting / { float: left; / 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. Code: #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. __________________ Help TSF Fight Cancer!* Web Developer Tools: Firebug for Firefox \| IE Developer Toolbar \| Run multiple versions of IE

05-01-2008, 06:20 AM	#5 (permalink)
jamiemac2005 Design Team Member Join Date: Jul 2007 Location: Coventry, UK Posts: 1,884 OS: Vista, various linux distros	Re: Adding another column with CSS Looks like Jaxo beat me too it Hope it all works fine for you, Jamey

05-01-2008, 07:47 AM	#6 (permalink)
RegCom Registered User Join Date: Dec 2005 Location: Saint Louis Posts: 39 OS: Windows XP	Re: Adding another column with CSS Thank You!! CSS is not my strong point in programming.