Question

okay, so I’m trying to set up a webpage with a div wrapping two other divs, and the wrapper div has a background, and the other two are transparent. How come this isn’t working?

here is the CSS:

.posttext{
    float: left;
    width: 70%;
    text-align: left;
    padding: 5px;
    background-color:  transparent !important;
}

.postavi{
    float: left;
    width: 100px;
    height: 100%;
    text-align: left;
    background-color: transparent !important;
    padding: 5px;
}

.postwrapper{
    background-image:url('images/post_bg.png');
    background-position:left top;
    background-repeat:repeat-y;
}

and here is the HTML:

<div class="postwrapper">

                            <div class="postavi"><img src="http://prime.programming-designs.com/test_forum/images/avatars/hacker.png" alt="hacker"/></div><div class="posttext"><p style="color: #ff0066">You will have bad luck today.</p>lol</div>
                        </div>

Edit: at request, here is a link to the site: http://prime.programming-designs.com/test_forum/viewthread.php?thread=33

Answer 1

The !important keyword has to come last (i.e. after the value), and transparent is a keyword not an RGB value expressed in hexidecimal (so it should not be prefixed with a #).

These issues would be picked up by a validator.

Since .postavi is floating, it doesn’t influence the height of its container, so .postwrapper has a height of 0 and you can’t see the background in it. There are various ways to work around this, I usually prefer the overflow: hidden method. See http://complexspiral.com/publications/containing-floats/ for an explanation as to why.