Help: CSS columns

Discussion in 'CSS' started by irule272, Mar 2, 2009.

0
  1. #1
    Hello! I downloaded a blogspot template with 2 columns only, I tried to recode it to make it 3 columns but I'm having a hard time creating a column to the left. I don't have any knowledge in css and hoping that you guys can help me or atleast guide me through this...


    Here's the code..

    #navbar-iframe {
    display: none !important;
    }
    body {
    background: #111 url(http://4.bp.blogspot.com/_kMUpUqMmduA/SVU80wCpSdI/AAAAAAAAA5c/YvJiRzAcUOg/s1600/bg.png);
    width: 980px;
    color: #333;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    margin: 0 auto 0;
    padding: 0;
    }

    #leftcontent { position: absolute;
    left:10px;
    top:77px;
    width:100px;
    background:red;
    border:10px solid darkblue;
    }

    #wrap {
    background: #111;
    width: 960px;
    margin: 10px auto 10px;
    padding: 0;
    position: relative;
    border: 10px solid #333;
    }

    a, a:visited {
    color: #A91B33;
    text-decoration: none;
    }
    a:hover {
    color: #A91B33;
    text-decoration: underline;
    }
    a img {
    border-width: 0;
    }
    #topnavbar {
    background: #111 url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU83AJh2SI/AAAAAAAAA60/cBmw4fQjzF8/s1600/topnav.png);
    width: 960px;
    height: 30px;
    color: #FFF;
    margin: 0;
    padding: 0;
    }
    #topnavbar a, #topnavbar a:visited {
    font-size: 11px;
    font-weight: bold;
    color: #FFF;
    text-decoration: none;
    }
    #topnavbar a:hover {
    text-decoration: underline;
    }
    #topnavbar p {
    font-size: 11px;
    font-weight: bold;
    padding: 0;
    margin: 0;
    }
    .topnavbarleft {
    width: 230px;
    float: left;
    margin: 0;
    padding: 8px 0 0 10px;
    }
    .topnavbarright {
    width: 600px;
    float: right;
    margin: 0;
    padding: 7px 10px 0 0;
    text-transform: uppercase;
    text-align: right;
    }
    .topnavbarright a img {
    border: none;
    margin: 0 3px 3px 0;
    padding: 0;
    }
    #header {
    background: #111 url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU809IyVNI/AAAAAAAAA5k/7_DXEKzUD40/s1600/header.png);
    width: 960px;
    height: 100px;
    color: #FFF;
    font-size: 11px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    }
    #header-inner {
    background-position: left;
    background-repeat: no;
    }
    #header h1 {
    color: #FFF;
    font-size: 36px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    margin: 0;
    padding: 15px 0 0 20px;
    text-decoration: none;
    }
    #header h1 a, #header h1 a:visited {
    color: #FFF;
    font-size: 36px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-decoration: none;
    }
    #header h1 a:hover {
    color: #FFF;
    text-decoration: none;
    }
    #header h3 {
    color: #A91B33;
    font-size: 16px;
    font-family: Arial, Tahoma, Verdana;
    font-weight: normal;
    margin: 0;
    padding: 0;
    }
    #header p {
    color: #FFF;
    padding: 0 0 5px 20px;
    margin: 0;
    line-height: 20px;
    }
    .headerleft {
    width: 460px;
    float: left;
    font-size: 14px;
    margin: 0;
    padding: 0;
    }
    .headerleft a img {
    border: none;
    margin: 0;
    padding: 0;
    }
    .headerright {
    width: 486px;
    float: right;
    margin: 0;
    padding: 18px 0 0;
    font-weight: bold;
    }
    .headerright a img {
    border: 1px solid #FFF;
    margin: 0 0 3px;
    padding: 0;
    }
    #header .description {
    color: #A91B33;
    font-size: 16px;
    font-family: Arial, Tahoma, Verdana;
    font-weight: normal;
    margin-left: 25px;
    padding: 0;
    }
    #NavbarMenu {
    background: #555 url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU82PLeYMI/AAAAAAAAA6c/R8Ip5ZMFIh8/s1600/navbar.png);
    width: 960px;
    height: 35px;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    color: #FFF;
    font-weight: bold;
    margin: 0;
    padding: 0;
    }
    #NavbarMenuleft {
    width: 680px;
    float: left;
    margin: 0;
    padding: 0;
    }
    #NavbarMenuright {
    width: 280px;
    font-size: 11px;
    float: right;
    margin: 0;
    padding: 6px 0 0;
    }
    #nav {
    margin: 0;
    padding: 0;
    }
    #nav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #nav li {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #nav li a, #nav li a:link, #nav li a:visited {
    color: #FFF;
    display: block;
    font-size: 16px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    text-transform: lowercase;
    margin: 0;
    padding: 9px 15px 8px;
    }
    #nav li a:hover, #nav li a:active {
    background: #555 url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU-vl5H-bI/AAAAAAAAA68/U4rkLsg0HqE/s1600/navhov.png);
    color: #FFF;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
    }
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #555;
    width: 150px;
    color: #FFF;
    font-size: 14px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    text-transform: lowercase;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
    }
    #nav li li a:hover, #nav li li a:active {
    background: #777;
    color: #FFF;
    padding: 7px 10px;
    }
    #nav li {
    float: left;
    padding: 0;
    }
    #nav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
    }
    #nav li ul a {
    width: 140px;
    }
    #nav li ul ul {
    margin: -32px 0 0 171px;
    }
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
    }
    #nav li:hover, #nav li.sfhover {
    position: static;
    }
    #searchform {
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: inline;
    }
    #searchbox {
    background: #EEE !important;
    width: 220px;
    color: #202020;
    font-size: 12px;
    font-family: Georgia, Times New Roman, Trebuchet MS;
    font-weight: normal;
    margin: 0;
    padding: 4px 0 3px 5px;
    border-top: 1px solid #DDD;
    border-right: 1px solid #666;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #666;
    display: inline;
    }
    #searchbutton {
    background: #555 url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU83AJh2SI/AAAAAAAAA60/cBmw4fQjzF8/s1600/topnav.png);
    color: #FFF;
    font-size: 11px;
    font-family: Georgia, Times New Roman, Trebuchet MS;
    margin: 0 0 0 5px;
    padding: 3px 3px 2px;
    font-weight: bold;
    border-top: 1px solid #DDD;
    border-right: 1px solid #666;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #666;
    }
    #subscribe {
    margin: 0;
    padding: 5px 0 0;
    overflow: hidden;
    }
    #subbox {
    background: #EEE !important;
    width: 200px;
    color: #202020;
    font-size: 12px;
    font-family: Georgia, Times New Roman, Trebuchet MS;
    font-weight: normal;
    margin: 5px 0 0;
    padding: 3px 0 3px 5px;
    border-top: 1px solid #666;
    border-right: 1px solid #DDD;
    border-left: 1px solid #666;
    border-bottom: 1px solid #DDD;
    display: inline;
    }
    #subbutton {
    background: #555 url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU83AJh2SI/AAAAAAAAA60/cBmw4fQjzF8/s1600/topnav.png);
    color: #FFF;
    font-size: 11px;
    font-family: Georgia, Times New Roman, Trebuchet MS;
    margin: 0 0 0 7px;
    padding: 3px 3px 2px;
    font-weight: bold;
    border-top: 1px solid #DDD;
    border-right: 1px solid #666;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #666;
    }
    #name, #email, #url {
    background: #EEE !important;
    width: 250px;
    color: #202020;
    font-size: 12px;
    font-weight: normal;
    margin: 5px 0 0;
    padding: 3px 0 3px 5px;
    border-top: 1px solid #666;
    border-right: 1px solid #DDD;
    border-left: 1px solid #666;
    border-bottom: 1px solid #DDD;
    display: inline;
    }
    #submit {
    background: #7B7B7B;
    color: #FFF;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    margin: 0;
    padding: 3px 3px 2px;
    font-weight: bold;
    border-top: 1px solid #DDD;
    border-right: 1px solid #666;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #666;
    }
    #words {
    background: #EEE;
    width: 460px;
    color: #202020;
    font-size: 12px;
    font-weight: normal;
    margin: 5px 0 0;
    padding: 3px 0 3px 5px;
    border-top: 1px solid #666;
    border-right: 1px solid #DDD;
    border-left: 1px solid #666;
    border-bottom: 1px solid #DDD;
    display: inline;
    }
    #subnavbar {
    background: #666;
    width: 960px;
    height: 24px;
    color: #FFF;
    margin: 0;
    padding: 0;
    }
    #subnav {
    margin: 0;
    padding: 0;
    }
    #subnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #subnav li {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #subnav li a, #subnav li a:link, #subnav li a:visited {
    color: #FFF;
    display: block;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 5px 0 0;
    padding: 6px 13px;
    }
    #subnav li a:hover, #subnav li a:active {
    background: #888;
    color: #FFF;
    display: block;
    text-decoration: none;
    margin: 0 5px 0 0;
    padding: 6px 13px;
    }
    #subnav li li a, #subnav li li a:link, #subnav li li a:visited {
    background: #666;
    width: 140px;
    float: none;
    margin: 0;
    padding: 6px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
    }
    #subnav li li a:hover, #subnav li li a:active {
    background: #888;
    margin: 0;
    padding: 6px 10px;
    }
    #subnav li {
    float: left;
    padding: 0;
    }
    #subnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
    }
    #subnav li ul a {
    width: 140px;
    }
    #subnav li ul ul {
    margin: -25px 0 0 161px;
    }
    #subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
    left: -999em;
    }
    #subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
    left: auto;
    }
    #subnav li:hover, #subnav li.sfhover {
    position: static;
    }
    #outer-wrapper {
    width: 688px;
    margin: 0 auto 0;
    padding: 10px 0 0;
    line-height: 18px;
    }
    #main-wrapper {
    float: left;
    width: 600px;
    margin: 0;
    padding: 0 0 20px;
    }

    #sidebar-wrapper {
    float: right;
    width: 80px;
    margin: 0;
    padding: 0 0 10px;
    display: inline;
    }
    #midsidebar-wrapper {
    width: 240px;
    float: right;
    overflow: hidden;
    }
    #lsidebar {
    background: #EEE;
    float: left;
    width: 100px;
    margin: -10;
    padding: 10px 10px 0;
    border: 1px solid #DDD;
    display: inline;
    }
    #rsidebar {
    background: #FFF url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU82YM12GI/AAAAAAAAA6k/-mtGMiUJ6pE/s1600/rightsidebartop.gif) top no-repeat;
    float: right;
    width: 100px;
    margin: -10;
    padding: 10px 10px 0;
    border: 1px solid #DDD;
    display: inline;
    }
    h2.date-header {
    margin: 1.5em 0 .5em;
    display: none;
    }


    .post {
    background: #666;
    float: right;
    width: 560px;
    margin: 0 0 10px;
    padding: 10px;
    border: 1px solid #DDD;
    }
    .post h3 {
    color: #FFFFFF;
    font-size: 22px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    margin: 0 0 5px;
    padding: 10px 0 0;
    }
    .post h3 a, #content h1 a:visited {
    color: #FFFFFF;
    font-size: 22px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    margin: 0 0 5px;
    padding: 10px 0 0;
    }
    .post h3 a:hover {
    color: #A91B33;
    text-decoration: none;
    }
    .post-body {
    margin: 0 0 .75em;
    line-height: 1.6em;
    }
    .post-body blockquote {
    line-height: 1.3em;
    }
    .comment-link {
    margin-left: .6em;
    }
    .post img {
    padding: 10px;
    }
    .post blockquote {
    background: #E8E8E8;
    margin: 0 25px 15px;
    padding: 10px 20px 0 15px;
    border-top: 1px solid #DDD;
    border-right: 1px solid #666;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #666;
    }
    .post blockquote p {
    margin: 0;
    padding: 0 0 15px;
    }

    .comments {
    background: #FFF url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU81N7CTKI/AAAAAAAAA50/VjuFzYPFIzA/s1600/homepagetop.gif) top no-repeat;
    float: left;
    width: 590px;
    margin: 0 0 10px;
    padding: 10px;
    border: 1px solid #DDD;
    }
    #comments h4 {
    color: #A91B33;
    font-size: 22px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    margin: 0 0 20px;
    padding: 10px 0 0;
    }
    #comments-block {
    width: 580px;
    float: left;
    padding: 0;
    margin: 0;
    }
    #comments-block .comment-author {
    margin: .5em 0;
    font-weight: bold;
    }
    #comments-block .comment-body {
    margin: .25em 0 10px;
    padding-left: 20px;
    }
    #comments-block .comment-footer {
    margin: -.25em 0 2em;
    line-height: 1.4em;
    text-transform: uppercase;
    letter-spacing: .1em;
    border: 1px solid #DDD;
    }
    #comments-block .comment-body p {
    margin: 0 0 .75em;
    }
    .deleted-comment {
    font-style: italic;
    color: gray;
    }
    #blog-pager-newer-link {
    float: left;
    display:none;
    }
    #blog-pager-older-link {
    float: right;
    display:none;
    }
    #blog-pager {
    text-align: center;
    display:none;
    }
    .feed-links {
    clear: both;
    line-height: 2.5em;
    display:none;
    }

    .sidebar {
    color: #666;
    line-height: 1.5em;
    }
    .sidebar h2, .rsidebar h2, .lsidebar h2 {
    background: #333 url(http://4.bp.blogspot.com/_kMUpUqMmduA/SVU81KcgGkI/AAAAAAAAA5s/F42frbPwJ00/s1600/headline.png);
    color: #FFF;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding: 3px 0 3px 7px;
    }
    #sidebar p {
    margin: 0;
    padding: 0 0 0 45px;
    }
    #sidebar a img {
    border: none;
    margin: 0;
    padding: 0;
    }
    .sidebar ul, .rsidebar ul, .lsidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    .sidebar ul li, .rsidebar ul li, .lsidebar ul li {
    background: #FFF url(http://4.bp.blogspot.com/_kMUpUqMmduA/SVU81WBL-vI/AAAAAAAAA58/8Bw6OazI-mc/s1600/icon.gif) no-repeat;
    list-style-type: none;
    margin: 0 0 5px;
    padding-left: 20px;
    }
    .sidebar .widget {
    background: #111;
    float: left;
    width: 200px;
    margin: -10 -10 -10px;
    padding: 2px;
    border: none;
    }
    .sidebar .widget, .main .widget {
    margin: -10 -10 -10em;
    padding: -10 -10 -10em;
    }
    .sidebar .widget {
    background: #111;
    float: left;
    width: 200px;
    margin: -10 -10 -10px;
    padding: 2px;
    border: none;
    }
    .main .Blog {
    border-bottom-width: 0;
    }
    #footer {
    width: 660px;
    clear: both;
    margin: 0 auto;
    padding-top: 15px;
    line-height: 1.6em;
    text-transform: uppercase;
    letter-spacing: .1em;
    text-align: center;
    }
    #credits {
    background: #93BBBC url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU83AJh2SI/AAAAAAAAA60/cBmw4fQjzF8/s1600/topnav.png);
    width: 960px;
    height: 30px;
    margin: 0;
    padding: 0;
    text-align: center;
    }
    #credits p {
    color: #FFF;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    margin: 0;
    padding: 9px 0 0;
    }
    #credits a, #footer a:visited {
    color: #FFF;
    text-decoration: none;
    }
    #credits a:hover {
    color: #FFF;
    text-decoration: underline;
    }






    here's the sample website --> HERE

    if you will notice there are two elements below the youtube embedded videos I want to put it in the left column but it seems like I don't have any div on that place.. can someone pls. guide me...

    Thanks!
     
    irule272, Mar 2, 2009 IP
  2. SuccessSuccess

    SuccessSuccess Well-Known Member

    Messages:
    149
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    110
    #2
    why are you playing with HTML and CSS when blogger already has move and modify facility.
     
    SuccessSuccess, Mar 3, 2009 IP