Adding a 3rd column on the right

Dev Shed Forums Sponsor:

October 26th, 2012, 12:26 PM

WillAllon

Registered User

Join Date: Oct 2012

Posts: 1

Time spent in forums: 13 m 36 sec
Reputation Power: 0

Adding a 3rd column on the right

Hi all, I'm a beginner with CSS and i tried fiddling with the code but keep messing things up.

I'd like to add a third column to the right.

Its probably something really easy :s. My CSS code is also pretty messy, sorry about that, like I said, I'm just a beginner

.

I'd post the link to the website but can't without breaking the forum rules unfortunatly.

Thanks in advance.

Quote:

#wrap {
width: 1003px;
margin: 0 auto;
}

body {
background: #fff;
color: #000;
font: 0.7em/160% "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
padding: 10px;
}
body {
background-color:#AAD284;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#333333;
margin:0;
}
a {
color:#006633;
font-weight:bold;
text-decoration:none;
}
a:hover {
color:#006633;
font-weight:bold;
text-decoration:underline;
}

#header {
width:100%;
color:#ffffff;
text-align:right;
}
#header p {
padding:5px;
margin:0;
}
#header a {
color:#FFFFFF;
text-decoration:underline;
font-weight:normal;
}
#header a:hover {
color:#FFFFFF;
text-decoration:none;
font-weight:normal;

}
#subheader {
background-color:#406020;
color:#3b5522;
border-top: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
text-align:left;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:2.5em;
letter-spacing:-1px;
}
#subheader p {
padding:20px;
margin:0;
}

#menu {
background-color:#EFF7E8;
border-top: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
text-align:center;
}
#menu p {
padding-top:8px;
padding-bottom:8px;
margin:0;
}
#menu a {
background-color:#B1B18B;
border-top: 1px solid #ececcf;
border-left: 1px solid #ececcf;
border-bottom: 1px solid #86866b;
border-right: 1px solid #86866b;
height:100%;
padding:5px;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}
#menu a:hover {
background-color:#90906a;
border-top: 1px solid #606049;
border-left: 1px solid #606049;
border-bottom: 1px solid #a2a28c;
border-right: 1px solid #a2a28c;
height:100%;
padding:5px;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}
#container {
width:100%;
}
#left_column {
width: 20em;
float: left;
clear: left;
border-radius: 20px;
background-color:#EFF7E8;
border-top: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
}
#left_column h1 {
background-color:#FFFFFF;
font-size:150%;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
margin-top:100px;
margin:0;
color:003300;
padding-left:4px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-weight:normal;
}
#left_column a {
line-height:25px;
color:#006633;
text-decoration:none;
display:block;
padding-left:1px;
font-size:110%;
}
#left_column a:hover {
line-height:25px;
color:#ffffff;
text-decoration:none;
display:block;
background-color:#A3D175;
padding-left:5px;
}
#left_column p {
padding:1px;
}

.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}

#right_column {
background-color: #EFF7E8;
border-radius: 20px;
text-align: justify;
line-height: 1.5em;
margin: 0 0 0 15em;
padding-right:10px;
padding-left:10px;
padding-top:10px;
padding-bottom:10px;
border-top: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
font-size:140%;
}
#right_column p {
padding:1px;
}

#right_column h1 {
background-color:#cdd4d6;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
color:#000000;
padding:3px;
font-size:100%;
font-weight:normal
}
#footer {
background-color:#CACAAF;
border-top: 1px solid #ececcf;
border-bottom: 1px solid #a8a88d;
width:100%;
text-align:right;
color:#FFFFFF;
}
#footer p {
padding:5px;
margin:0;
}
#footer a {
color:#FFFFFF;
}
input {
background-color:#7F9966;
border-bottom: 1px solid #9fbb88;
border-right: 1px solid #9fbb88;
border-top: 1px solid #5d7744;
border-left: 1px solid #5d7744;
color:#FFFFFF;
}
textarea {
background-color:#7F9966;
border-bottom: 1px solid #9fbb88;
border-right: 1px solid #9fbb88;
border-top: 1px solid #5d7744;
border-left: 1px solid #5d7744;
color:#FFFFFF;
}
submit {
background-color:#7F9966;
border-bottom: 1px solid #9fbb88;
border-right: 1px solid #9fbb88;
border-top: 1px solid #5d7744;
border-left: 1px solid #5d7744;
color:#FFFFFF;
}
acronym {
font-variant:small-caps;
cursor:help;
letter-spacing:2px;
font-weight:bold;
}

October 26th, 2012, 04:32 PM

tornadoe

Registered User

Join Date: Oct 2012

Posts: 4

Time spent in forums: 41 m 40 sec
Reputation Power: 0

Quote:

Originally Posted by WillAllon

.

I'd post the link to the website but can't without breaking the forum rules unfortunatly.

Thanks in advance.

Check this out: dynamicdrive DOT com/style/layouts/category/C10/

Replace the spaces and DOT with .

hope that helps

Adding a 3rd column on the right

Developer Shed Advertisers and Affiliates