PDA

View Full Version : elements not staying in columns



fine0023
Mar 3rd, 2012, 01:46 AM
I have a two column layout. The left-hand column consists of three elements stacked on top of one another. The right-hand column is a little more complicated. I'm having a problem where when I apply float:left to the bottom item in the left-hand column, it screws everything up and all of the stuff from the right-hand column jumps down below the left-hand column stuff. When that bottom item in the left-hand column doesn't float-left, the stuff in the right-hand column stays to the up and to the right where it's supposed to be.

The problem is that I need this bottom item to float:left (it's this semi-complicated thing with an extra border around it), but I also of course need the stuff in the second-column to behave correctly. Is there something I can do to make it so the stuff in the right-hand column doesn't jump down to the left no matter what? I think I might be missing something obvious here to make the two columns truly separate.

telekovar
Mar 3rd, 2012, 09:26 AM
Have you tried wrapping each column in its own div yet? Do that, then float the wrapper divs instead of the others...

SB65
Mar 3rd, 2012, 10:55 AM
Sounds like your problem is related to the block formatting context (http://communitymx.com/content/article.cfm?cid=6BC9D). Depending on how you have your css set up on the two columns, they may not have established a separate block formatting context.

Floating both left and right columns would sort the problem, as would applying overflow:auto or overflow:hidden to the column containing the floated element (although the latter can cause further issues on Webkit/Opera 9/10 in some cases).

telekovar
Mar 3rd, 2012, 11:16 AM
Sounds like your problem is related to the block formatting context (http://communitymx.com/content/article.cfm?cid=6BC9D). Depending on how you have your css set up on the two columns, they may not have established a separate block formatting context.

Floating both left and right columns would sort the problem, as would applying overflow:auto or overflow:hidden to the column containing the floated element (although the latter can cause further issues on Webkit/Opera 9/10 in some cases).

Thank you. You actually just helped me solve my problem in a different thread. Haha.