Home/ Questions/Q 7939493
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T23:07:01+00:00

I’m having this problem with page layout that I’ve been battling for too long

  • 0

I’m having this problem with page layout that I’ve been battling for too long to continuing looking at sanely. The overall page layout is a standard two-column: a main column with one narrow one on the right (with float: right) and the remainder of the page being the main area.

Now, within the main area, I have a piece of content that needs to float along the right edge of the main area – which is fine. However then I need to put some content below the floating part in the main area, yet not below the big right column – and I just can’t figure out how to do it.

Here’s the jsfiddle with what I’m trying to do: http://jsfiddle.net/rx7Pd/

Any help is greatly appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add overflow: auto or overflow: hidden to the main container.

    Updated example: http://jsfiddle.net/TT8QF/

    This is a common fix related to clearing floated divs. You can find some info here and here.

    If you use this fix on the parent element too, you can get rid of the ugly clearing div at the bottom of HTML code. Just see:

    Updated example: http://jsfiddle.net/bNS98/

    • 0