Results 1 to 6 of 6

Thread: Vertical-align div within div

  1. #1
    Join Date
    May 2007
    Location
    England, UK
    Posts
    235
    Thanks
    3
    Thanked 6 Times in 6 Posts

    Default Vertical-align div within div

    Does anyone know how to vertically align a div within another div?
    without setting the height of the parent div!

    I have two child divs that have variable heights (dynamically generated), they are in a parent div that has a variable height depending on the size of either one of the child divs (the child divs are side by side, so one could be bigger than the other)

    e.g.

    if 'child div 1' is 800px in height and 'child div 2' is only 100px high
    i would like 'child div 2' vertically aligned in the middle.
    'child div 1' would would stretch the parent div to 800px so wouldn't need to be vertically-aligned.

    Hope this makes sense!

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    forcing the shorter of the divs to center vertically is only going to confuse the user, not to mention it's breaking convention, which usually isnt a bright idea if doing it just for "shits n giggles" so to speak, which is what it looks likeyou want to do here.
    you can use margins to push down the div that isnt as long.

    the height of any unstyled element is the sum of the heights of its contents (which may have its own margin/padding by default)

  3. #3
    Join Date
    May 2007
    Location
    England, UK
    Posts
    235
    Thanks
    3
    Thanked 6 Times in 6 Posts

    Default

    The 800px and 100px is only an example and an extreme one at that.
    In reality there is probably only going to be about 150px difference either way.

    I am doing it for a practical reason, I want my webpage to be uniform for which ever product someone clicks on.

    The product picture is at the left hand side and the product desription is on the right and trust me, it looks a whole lot better when its vertically aligned.

    I could do it using tables but i'm trying to avoid them.

  4. #4
    Join Date
    May 2007
    Location
    England, UK
    Posts
    235
    Thanks
    3
    Thanked 6 Times in 6 Posts

    Default

    Anyone else have any idea how i can vertically align these divs without setting the height of any of them?

    mayby some javascript to detect the height that the div has been stretched to?

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Sounds like a table to me.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    May 2007
    Location
    England, UK
    Posts
    235
    Thanks
    3
    Thanked 6 Times in 6 Posts

    Default

    Yes, i've now given in to the table!

    Thanks anyways!

Bookmarks

Posting Permissions

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