Jump to content

Vertical Alignment


vchris

Recommended Posts

I've already searched a bit on google and was able to find examples of what I wanted but the only problem is that the div isn't 100% width anymore.Is there a way to have text within a div to be centered vertically and the div have 100% width and be valid?

Link to comment
Share on other sites

Ok I have a banner div that is something like 80 px height and 100% width. I have a background on the left and the rest is blue. I also have some text in this area beside the background image.I've seen that site before Caligo and the problem with it is the div looses it's 100% width or am I wrong?

Link to comment
Share on other sites

Ok I have a banner div that is something like 80 px height and 100% width. I have a background on the left and the rest is blue. I also have some text in this area beside the background image.I've seen that site before Caligo and the problem with it is the div looses it's 100% width or am I wrong?
The inner div (containing the text) would not be 100% of the window, it would be 100% of the outer div. If the outer div is the outer most div then that one would be 100%, therefore you would get within a couple pixels of 100%. Though, in reality I think you could have them both 100% without borders and they both should end up being 100% of the window.If my ramblings don't make any sense let me know and I'll try to explain them differently.
Link to comment
Share on other sites

is there any easier method than this? this problem is a huge a pain and seems totally counter-intuitive, especially when design based on the table model does it so easily. i would like to not have to resort to using tables, but until a newer version of css comes out that addresses the vertical-align property not working intuitively, i've found using a table to be much less of a headache than the div-within-a-div-within-a-div plus SIX additional classes just to vertically align content in a single element. is that really easier than this:<div id="foo" class="bar"><table style="width: 100%; height: 100%;"><tr><td style="width: 100%; height: 100%;" valign="middle">content</td></tr></table></div>this solution won't win you any awards, but if you have other things to worry about than HTML Tidy giving you 0 errors and 0 warnings, then the second solution is the way to go

Link to comment
Share on other sites

I guess other available solutions depending on the situation are padding the top of the text and relative/absolute positioning.

Link to comment
Share on other sites

I guess other available solutions depending on the situation are padding the top of the text and relative/absolute positioning.
id agree. it really depends on the situation what you can do, at least until they get the vertical align property working.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...