#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    1
    Rep 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.

    #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;
    }
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    4
    Rep Power
    0
    Originally Posted by WillAllon
    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.

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

    Replace the spaces and DOT with .

    hope that helps

IMN logo majestic logo threadwatch logo seochat tools logo