CODEWITHSUNDEEP
csshtmlcontainers
steve0nz
steve0nz

Reputation: 906

How do I stop my 2-column layout from pushing the right floating div below?

I have a simple 2 column layout within a centered background div.

The two columns are inside a larger div which is centered in the page. The issue is that the right column may be 1-2 pixels out and will be pushed to the bottom of the first div. How can I stop this from happening? I would prefer the second column to push outside to the right of the surrounding div.

Upvotes: 1

Views: 2004

Answers (2)

ralph.m
ralph.m

Reputation: 14345

A couple of options. You can float the left column left and the right column right. (If you do that, give the container overflow: hidden so that it wraps around the columns, and also make sure the combined widths of the columns are a bit less that the width of the container, to prevent the problem you are having and also to create a space between the two columns.)

Another option is not to float the main content column but instead (assuming it's the right column) to give it a large left margin that is slightly wider than the width of the left column. Then float the left column and just make sure it comes before the right column in the HTML.

there are other methods still, but these are perhaps the two most common.

It would be good to see your page code if more advice is needed.

Upvotes: 1

Qiqi Abaziz
Qiqi Abaziz

Reputation: 3353

The reason why the second column aligned bottom of the first column is because the sum for both column widths have exceed the size of that container, or maybe because you didn't applying floats (left/right) to that columns.

I would prefer the second column to push outside to the right of the surrounding div

That means you want to put the column out from its container. You can apply negative value to achieve this.

Example:

.right{
    position:relative;    /* apply position relative */
    right:-20px;          /* out from the container by 20px on right */
}

Have a look at here http://jsfiddle.net/qiqiabaziz/RseAp.

Upvotes: 0

Related Questions