Grow your CSS skills. Land your dream job.

Help with div backgrounds

  • # April 15, 2009 at 12:51 am

    Here is the link to my blog theme design:
    http://marlonart.com/dev/

    I’m new to CSS but I’ve learned a lot since I’ve started with this project. It’s basically a blog for my website. I downloaded a blank blog template and modified it to suit my needs.

    My current problem is simple, although I haven’t found a simple solution. The backgrounds of the sidebar and main content column don’t want to extend downwards past the actual content. It’s not so apparent with the main column as it is with the sidebar. I need the sidebar and main column to extend to the height of the browser at all times.

    For reference, the way I have the DIVs arranged is like this:

    Shell- wraps around everything. Not sure if this is even
    necessary but for some reason it keeps everything in
    place.
    Wrapper- wraps the container houses a background image.
    Container- houses the post data.
    All of the above are auto centered left and right.
    Topnav- houses the top navigation bar + images. Its within
    the wrapper div.
    Left- left floating image.

    Here’s the code:

    style.CSS

    Code:
    body,h1,h2,h3,h4,h5,h6,blockquote,p{
    margin: 0;
    padding: 0;
    }

    body{
    margin: 0 0 0 0;
    font-family: Arial, Helvetica, Georgia, Sans-serif;
    font-size: 12px;
    text-align: left;
    vertical-align: top;
    background: #e5e5e5;
    color: #eeeeee;
    background-image: url(images/BGpaper.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top center;

    }

    #topnav {
    float: left;
    width: 410px;
    margin: 0 auto 0 auto;
    }

    #shell{
    width: 1024px;
    margin: 0 auto 0 auto;
    }

    #top{
    font-size: 32px;
    color: #ffba00;
    width: 473px;
    height: 229px;
    margin: 0 0 0 0;
    background-color: #929292;
    background: url(“images/top.png”);
    }

    #bottom{

    width: 473px;
    height: 80px;
    margin: 0 0 0 0;
    background: url(“images/bottom.png”);

    }

    #right{

    width: 130px;
    height: 331px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background: url(“images/right.png”);
    background-repeat: no-repeat;
    }

    #left{
    float: left;
    width: 281px;
    height: 459px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background: url(“images/left.png”);

    }

    #linkbar{

    width: 473px;
    height: 24px;
    margin: 0 0 0 0;
    background: url(“images/mid.png”);
    }

    #wrapper{
    float: left;
    margin: 0 auto 0 auto;
    width: 473px;
    text-align: left;
    background-attachment: scroll;
    background-position: top center;
    background-repeat: repeat;
    background: url(“images/main.png”);

    }

    #container{

    width: 410px;
    margin: 0 auto 0 auto;
    }

    .post{
    padding: 35px 0 10px 0;
    }

    .post h2{
    font-family: Verdana, Sans-serif;
    font-size: 17px;
    }

    p.postmetadata{
    border-top: 1px dotted #878787;

    margin: 5px 0 0 0;
    }

    .navigation{
    padding: 10px 0 0 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    }

    a { text-decoration:none; }
    :link { color: #696969; }
    :visited { color: #66818a; }
    a:active { color: #5f8abb; }
    a:hover { color: #670000; }

    .sidebar{

    font-size: 11px;
    color: #a5a5a5;
    width: 130px;

    margin: 0 0 0 0;
    padding: 0 0 0 0;

    }

    .sidebar ul{
    list-style-type: none;
    margin: 0;
    padding: 0 10px 0 10px;
    }

    .sidebar ul li{
    padding: 5px 0 5px 0;
    }

    #searchsubmit{
    border: 1px solid #a5a5a5;
    background: #a5a5a5;
    color: #dddddd;
    font-size: 1.1em;
    }

    #s{
    border: 1px solid #a5a5a5;
    background: none;
    color: #5b5b5b;
    font-size: 1.1em;
    width: 115px;
    }

    #sidewrap{
    float: left;
    width: 130px;

    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background: url(“images/side.png”);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: top center;
    }

    /*
    *{border: 1px solid red;}
    */

    index.PHP

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    # April 15, 2009 at 1:49 am

    Hi marl,

    I got the simple solution of your problem…try this
    html, body
    {
    height:100%;
    margin:0px;
    padding:0px;
    }
    #sidewrap
    {
    background:transparent url(images/side.png) repeat scroll center top;
    float:left;
    height:100%;
    margin:0;
    padding:0;
    width:130px;
    }

    # April 15, 2009 at 11:04 am

    Unfortunately that didn’t seem to work, although I’ll keep trying and playing with it. I forgot to mention that the #sidewrap contains the .sidebar in order to give it a background, much like I did with the #wrapper and #container. Problem is I dont know how to make the background extend down all the way, which is more apparent in the sidebar than the main column. Any other suggestions?

    # April 15, 2009 at 3:22 pm

    This, unfortunately, is a common problem with many different solutions (all of them seem to be relatively bad, imo). Here’s one for you that didn’t look too bad:

    http://matthewjamestaylor.com/blog/equa … s-no-hacks

    And of course, there’s always faux columns:

    http://www.alistapart.com/articles/fauxcolumns/

    # April 15, 2009 at 7:08 pm

    thanks for that first link doc, that is pretty smart. I never thought of doing it that way :-) We learn something new each day!

    # April 16, 2009 at 2:35 pm

    No dice. It seems that I’ve run into one of CSS’s limitations. The "faux" columns and even the suggestions from another forum have to do with background color and I need the background image extending down the length of the column. ALA has a page on referencing images with this method but that doesn’t seem to do much either:

    http://www.alistapart.com/articles/fauxcolumns/

    Also for some reason the "repeat-y" doesn’t work at all and I see no reason why it shouldn’t. Its damn frustrating. Could it be the height of the background image thats causing the problem? The sidebar like the main column has a specific design, so they’re pretty tall pixel wise. The image I need tiled on the sidebar is 130×772. What should I do? Is there anything I can do?

    # April 16, 2009 at 3:22 pm

    Here’s a hack that will force it:

    Code:
    #sidewrap {
    background:transparent url(images/side.png) repeat scroll center top;
    float:left;
    height:1200px;
    margin:0;
    padding:0;
    width:130px;
    }

    But it’s not dynamic, if you add another post it won’t extend with the main content.
    Your problems are in your markup. You have a really odd hierarchy of divs, the sidebar is not attached to the main content in any way. Most sites do it something like this:

    Code:

    Yours is somewhat more convoluted with all kinds of strange divs going on in there.
    With faux columns the principle is the same whether it’s just color or an image, the content bg and the column bg shoud be one combined image, that way if one extends the other has to grow with it.

    # April 17, 2009 at 11:34 am
    "marlonart" wrote:
    No dice. It seems that I’ve run into one of CSS’s limitations. The "faux" columns and even the suggestions from another forum have to do with background color and I need the background image extending down the length of the column.

    As far as I’m aware there is no such limitation. It doesn’t matter what is applied to the "background", whether it be a color or an image, the CSS will render it the same regardless.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".