vertical aligning <div>s

Discussion in 'Web Design and Development' started by jelloshotsrule, Nov 29, 2006.

  1. jelloshotsrule macrumors G3

    jelloshotsrule

    Joined:
    Feb 7, 2002
    Location:
    serendipity
    #1
    ok, so here's what i have:

    a container <div> for the entire page at a fixed width, so that i can easily center nested divs within it. a few straightforward centered divs at the top and bottom of the page.

    what i want to add:

    in the middle of the page, i want to have basically 2 columns (without using tables). on the left is an image, on the right i want a blurb of text to be centered vertically to that image on the left.

    problem:

    i can't get it to center the text vertically to the image. i currently have a style sheet with a float:left style for each of the two columned divs. i set the vertical-align:middle for the text, but it doesn't budge. i guess i'm using it wrong, but i can't figure out how to center it, and there has to be a way besides fudging it by telling its position to be x pixels from the top

    any tips? thanks
     
  2. londonweb macrumors 6502

    londonweb

    Joined:
    Sep 14, 2005
    Location:
    london
    #2
    As far as I'm aware, this isn't entirely possible across all major browsers unless you use tables or some kind of workaround. The problem is that css currently suffers from poor support in terms of vertical positioning, and as you've seen, most often the vertical rules other than basic fixed height values will just be ignored.

    You could try this tutorial, I've only used it myself for setting a footer, but you should be able to change it to position anything at any vertical point just by changing the height value from 100% to 50%. It's basically a mixture of CSS and some relatively simple Javascript:

    www.alistapart.com/articles/footers/
     
  3. jelloshotsrule thread starter macrumors G3

    jelloshotsrule

    Joined:
    Feb 7, 2002
    Location:
    serendipity
    #3
    thanks for the response. i'll take a look at that.

    yeah, the original way i'd done it was using tables, and it worked fine. the problem was that i then wanted to use divs within the overall framework, and apparently you can't really use divs within tables, but you can do tables within divs, right? for some reason i was put off using tables, but ultimately i don't see a reason to just throw a two columned table in there for this portion, so i'll probably try that.

    thanks again!
     
  4. Stampyhead macrumors 68020

    Stampyhead

    Joined:
    Sep 3, 2004
    Location:
    London, UK
    #4
    Sure you can use <div> tags inside table cells.
     
  5. NoNameBrand macrumors 6502

    Joined:
    Nov 17, 2005
    Location:
    Halifax, Canada
    #5
    Why can't you just use a "margin-top: 50px;" in the CSS to push it down?
     
  6. crees! macrumors 68000

    crees!

    Joined:
    Jun 14, 2003
    Location:
    MD/VA/DC
    #6
    You can, but that's not vertical aligning.
     
  7. jeremy.king macrumors 603

    jeremy.king

    Joined:
    Jul 23, 2002
    Location:
    Fuquay Varina, NC
    #7
    I think the float:left is killing anything you set for vertical-align

    Instead use a container DIV for your middle section with the vertical-align property applied to an IMG element and a SPAN (for the text.
    HTML:
    <div style="width:100%; border:1px solid #CCC; padding:10px" id="middleContainer">
    	<img src="http://blog.jeremyron.com/images/misc/riley.jpg" 
    		style="vertical-align:middle; border:1px solid #CCC;"/>  
    		
    	<span style="vertical-align:middle; border:1px solid #CCC;">
    		some text to be aligned vertically in the middle
    	</span>
    
    </div>
    
    Note: you could have some wrapping issues, but these can be fixed with a width attribute on the containing DIV.

    Good Luck.
     

    Attached Files:

  8. londonweb macrumors 6502

    londonweb

    Joined:
    Sep 14, 2005
    Location:
    london
    #8
    What browser did you get this to work in? I can see from your screen shot that it obviously works, but I tried it in FF and Safari and both times it actually aligned the text at the bottom of the span.

    The table height property does not validate under XHTML (no idea why though, it seems a really useful feature) and general web standards recommend avoiding tables for layout, although many major websites still use them becuase of the lack of widespread css support. I've tried building sites many times without tables and have more often than not ended up sticking at least one in somewhere to get around a problem. My opinion is that it's no use driving yourself crazy just to keep within web standards when a job could take 2 minutes if you just bend the rules a bit.
     
  9. jeremy.king macrumors 603

    jeremy.king

    Joined:
    Jul 23, 2002
    Location:
    Fuquay Varina, NC
    #9
    :eek: IE6 Windows...

    Heres version 2! Works in FF2 and Safari in OS X. I will edit my last post with details.

    HTML:
    <div style="width:100%; border:1px solid #CCC; padding:10px" id="middleContainer">
    	<img src="http://blog.jeremyron.com/images/misc/riley.jpg" 
    		style="vertical-align:middle; border:1px solid #CCC;"/>  
    		
    	<span style="vertical-align:middle; border:1px solid #CCC;">
    		some text to be aligned vertically in the middle
    	</span>
    
    </div>
    
     
  10. jelloshotsrule thread starter macrumors G3

    jelloshotsrule

    Joined:
    Feb 7, 2002
    Location:
    serendipity
    #10
    thanks for that code, it does seem to work... but i'm running into an issue because my text includes more than one line. i copied and pasted text into your example such that it had more than one line... and what ends up happening is that the first line is vertically centered next to the picture, but then all the other lines go under the image vertically... hmm. any idea why/how to fix that??

    thanks again!
     

Share This Page