Bright Bright - 29 days ago 10
CSS Question

CSS, container height is too small than expected, any fix?

I am working on an educational page, I have faced a problem I can't really figure out how to solve. As you can see here: jsFiddle the yellow box is much larger than the blue border on the left, I need that blue border to go all the way down with the yellow box (mail example), like the dotted orange border on the left. Is there any way to solve it with

CSS
, and
HTML
?

Answer

There's tons of errors in your code.

You must not give more than 1 element the same ID: #col-2.

You have given a div the class .example, and then you gave its child paragraphs the same class, so you gave each paragraph a height, so the parent took that height, that's why the border isn't stretching, because this element only has 32px height.

So...

.example {
    /* background-image: url(../images/note_bg-line.jpg) repeat-y; */
    background-color: yellow;
}

Then give the paragraphs another class which has 32px height.

You specified the paragraphs like this...

<p class="p example"></p>

Remove this p example and just use this in CSS:

.example p {
        padding-top: 19px;
    padding-left: 70px;
    margin: -19px 0 0 0;
        height:32px;
}

You will get the desired effect...