"Incomplete" border problem

[john010117]

Hello.

 

I have a simple 2-column full-CSS layout (meaning: no tables). While putting the borders in, I have noticed that they do not show to the extent of the parent div. Let me show you what I mean:

 

#overall_div {
    width: 100%;
}

#column_1 {
    width: 25%;
    float: left;
    border-right: 1px solid #c2c2c2;
}

#column_2 {
    width: 75%;
    float: left;
}

<div id="overall_div">
    <div id="column_1">
        ...random content...
    </div>
    <div id="column_2">
        ...random content...
    </div>
</div>

 

Please note that that is the simplified code that I'm working with.

 

Anyways, if column #1 is "taller" than column #2, than the border will show fine. However, if column #2 is taller than column #1, the border only reaches up to the point where column #1's content ends. Now, I'm aware that CSS is supposed to do this, but is there any workaround?

[phpQuestioner]

you need to set your "border" style for the parent div (#overall_div).