Question

I have this basic HTML structure:

<div id="left-column"></div>
<div id="content"></div>
<div id="right-column"></div>

And this css:

#left-column
{
    padding-top: 25px;
    width: 80px;
    background: url('../../common/images/black70.png');
    height: 100%;
    float: left;
    margin-right: 5px;
}

#content
{
    padding: 5px;
}

#right-column
{
    padding-top: 25px;
    width: 190px;
    background: url('../../common/images/black40.png');
    height: 100%;
    float: right;
}

The problem is content padding is being propagated to right column:

How can I avoid this?

Thanks

Answer 1

The problem is your #right-column is after #content so in the document flow, it will start after the content, which has 10px height from its top and bottom padding.

If you re-order your HTML like so, it fixes your issue.

<div id="left-column"></div>
<div id="right-column"></div>
<div id="content"></div>

Here’s a jsfiddle