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 7 of 7
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,530
    Thanks
    45
    Thanked 259 Times in 256 Posts

    Making floating divs the same height

    I'm wondering if anyone knows a good method of making multiple floating divs the same height.

    I'm actually not all so concerned about them being the same height, but rather, I'd like to make a two column layout, giving both columns a border, and it doesn't look right at all if they are both different sizes. I'm floating both, but given both columns content are user generated, I don't know what height they will be, so I can't set sizes.

    The only method I can think of is to basically play visual games by wrapping them in a clearfix container with a background image simulating the side borders and bottom borders, and giving the two columns top borders. Any other methods?

  • #2
    New to the CF scene
    Join Date
    Sep 2011
    Location
    OKC, OK
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I believe you may find this helpful.

    http://www.alistapart.com/articles/fauxcolumns/

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,530
    Thanks
    45
    Thanked 259 Times in 256 Posts
    To the best of my knowledge, faux columns won't work, as I'm trying to create actual borders around the divs. As I proposed, I could use the faux column technique to mimic having given borders, but its far from ideal. I'm hoping to see if there are any other solutions.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Why wouldn't the background image technique work as suggested in the link above? The background image could be designed so as to appear to have a left and right border on their respective element. Then you'd just need to work out a top and bottom border, which wouldn't be hard.
    Teed

  • #5
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,530
    Thanks
    45
    Thanked 259 Times in 256 Posts
    I'm not saying it wouldn't work, I'm saying its something I've already considered. And actually, the bottom borders would be hard if the columns aren't actually the same height :P

    I was curious if there were any more direct methods.

  • #6
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    sure use javascript to determine the heights of all the elements, then set them all to the height of the highest result.

  • #7
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,530
    Thanks
    45
    Thanked 259 Times in 256 Posts
    Ah, yah, didn't think of JS. But basically I'm guessing no real method without JS to manipulate it. Hopefully they develop the css table properties further, or a technique comes together to do this without needing scripting.


  •  

    Posting Permissions

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