yandoo Posted November 27, 2012 Share Posted November 27, 2012 Hi there im having trouble alligning my text to the bottom of my div. So far I have tried: vertical-align:bottom; and vertical-align:text-bottom; It doesnt seem to position the text though, it just stays at the top. However it positions it to right as commanded. Heres a bit more of the code, maybe there a problem somewhere? #main {margin:0 auto;width:778px;background:#fff url(images/banner.gif) no-repeat center top} #header {width:763px;margin:10px; height:210px} #logo {padding-right:10px;text-align:right;padding-bottom:9px;height:150px;vertical-align:text-bottom} Any help would be greatly appreciated. Thank you Quote Link to comment Share on other sites More sharing options...
Love2c0de Posted November 27, 2012 Share Posted November 27, 2012 (edited) Just wrote a little code and got the desired effect. It depends on how your div's are positioned, I had to position that div using position: relative otherwise it will align to the bottom of the browser window. Not sure if this is the standard way, but this is how I would do it. Maybe there is a better way, I'm not sure. (I hope so as I'm not a fan of absolute positioning) Also, I've only declared borders and height on the #contain div so you can see how it works. Here ya go: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>HTML Template</title> <script type="text/javascript"> </script> <style type="text/css"> #contain { border: 1px solid black; width: 80%; position: relative; height: 600px; margin: auto; } #text { position: absolute; bottom: -10px; left: 100px /*set this to a positive value of your choice, and it will move your text to the right, as far as you need */ } </style> </head> <body> <div id="contain"> <p id="text">This is some text</p> </div> </body> </html> I've not read into absolute positioning fully but from what I've been told and understand, it breaks the flow of your document, so if you inserted that text element halfway down your page (inbetween some content), any content after that element will produce funny results in terms of where they are displayed. If I ever use absolute positioning (especially when aligning to the bottom of an element or body) I always make sure it's one of the last things which are put in the html. Hope this helps. Regards, AoTB. Edited November 27, 2012 by AoTBuNgLe Quote Link to comment Share on other sites More sharing options...
yandoo Posted November 27, 2012 Author Share Posted November 27, 2012 Thank you ever so much for your help it works a charm! Would it be wiser for me to put the position as a percentage rather than px, because other peoples computers maybe running at different resolutions... thats something I can look into. Thanks again thats brilliant Quote Link to comment Share on other sites More sharing options...
Love2c0de Posted November 27, 2012 Share Posted November 27, 2012 (edited) I think it would be, I have a very similar effect with an image and my navigation menu in my header and to tell the truth I used percentages. Regards, AoTB. Edited November 27, 2012 by AoTBuNgLe Quote Link to comment Share on other sites More sharing options...
codefossa Posted November 27, 2012 Share Posted November 27, 2012 If you used percentages (I would do it this way either way) but you could just set the position to 100% then use a negative margin for the size of the element. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.