Jump to content

Vertical Alignment


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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...