vertical aligning <div>s

[jelloshotsrule]

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

 

[londonweb]

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/

 

[jelloshotsrule]

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!

 

[Stampyhead]

apparently you can't really use divs within tables, but you can do tables within divs, right?

Sure you can use <div> tags inside table cells.

 

[NoNameBrand]

Why can't you just use a "margin-top: 50px;" in the CSS to push it down?

 

[crees!]

Why can't you just use a "margin-top: 50px;" in the CSS to push it down?

You can, but that's not vertical aligning.

 

[jeremy.king]

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.

<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.

 

[londonweb]

<div style="width:100%; border:1px solid #CCC; padding:10px" id="middleContainer">
	<span style="vertical-align:middle;border:1px solid #CCC" id="imageSpan">
		<img src="test.jpg"/>
	</span>
	<span style="vertical-align:middle;border:1px solid #CCC" id="textSpan">
		some text to be aligned vertically in the middle
	</span>
</div>

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.

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

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.

 

[jeremy.king]

What browser did you get this to work in?

IE6 Windows...

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

<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>

 

[jelloshotsrule]

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!