Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    elements not staying in columns

    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.

  • #2
    New Coder
    Join Date
    Mar 2012
    Location
    Tulsa, OK
    Posts
    31
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Have you tried wrapping each column in its own div yet? Do that, then float the wrapper divs instead of the others...

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Sounds like your problem is related to the block formatting context. 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).
    Last edited by SB65; 03-03-2012 at 10:04 AM.

  • #4
    New Coder
    Join Date
    Mar 2012
    Location
    Tulsa, OK
    Posts
    31
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by SB65 View Post
    Sounds like your problem is related to the block formatting context. 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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •