All geek questions in one place

How to align text flush with the bottom of a container using CSS?

In the following example, I want the bottom of the text of the site name "site name" and the bottom of the text of the menu "menu 1 menu 2 menu 3" to align with the bottom of the container in which they are located (header). As now, sitename text represents a certain number of pixels above its lower edge of the container, while menu text is a different number of pixels above the same edge. I want both elements to sit on the same row.

It seems that using line-height may pass it through the trial version and an error with different values, but the result is not consistent between browsers (for example, I can make them hide in Safari and Chrome, but then Firefox looks different). Should there be a better way?

Also, is there a better way to get the menu to enter this lower right corner, different from how I did it?

thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <style type="text/css"> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; } body { text-align: center; } #container { margin:0 auto; margin-top:20px; width:800px; border:1px solid red; text-align: left; } #header { float:left; position:relative; width:100%; border:1px solid green; } #sitename { float:left; left:0px; bottom:0px; margin:0; padding:0; border:1px solid blue; } #sitename h1 { font-weight: normal; } #menu { position:absolute; right:0; bottom:0; line-height:1em; float:right; list-style: none; border:1px solid blue; } #menu ul li { list-style: none; float:left; padding: 0 0 0 15px; } #sitename h1 { font-size: 3em; } </style> </head> <body> <div id="container"> <div id="header"> <div id="sitename"> <h1>site name</h1> </div> <div id="menu"> <ul id="nav"> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> </div> </div> <div id="content"> <p>here is some content.</p> </div> <div id="footer"> <p>here is the footer.</p> </div> </div> <!-- container --> </body> </html>
+4
source share
4 answers

You do not need to wrap h1 in a div . This is already an element of the block level. Try this code:

 <!-- CSS --> #header { float:left; position:relative; width:100%; border:1px solid green; height: 100px; } #sitename { position: absolute; float:left; left:0px; bottom:0px; margin:0; padding:0; border:1px solid blue; font-weight: normal; font-size:3em; } #menu { position:absolute; right:0; bottom:0; line-height:1em; float:right; list-style: none; border:1px solid blue; } #menu ul li { list-style: none; float:left; padding: 0 0 0 15px; } <!-- HTML --> <div id="header"> <h1 id="sitename">site name</h1> <div id="menu"> <ul id="nav"> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> </div> </div>
+1
source

You can set a negative margin on #sitename h1 . For instance.

 #sitename h1 { font-size: 3em; margin-bottom: -9px; }

The tricky part is to align it exactly in all browsers, since it differs between them by pixel.

+1
source

I would suggest positioning sitename as to where it is now, for example:

 #sitename h1 { position: relative; top: 9px; }

However, this is not ideal, because if different fonts are used, the spacing may be different. This is not something that can be fixed with any CSS property (currently). Can you view the image? Maintain the same height at any time?

0
source

Do you have any reset styles? Each browser has different default values ​​for padding and fields on items such as headers and lists. If you reset everything at the beginning of your stylesheet, it will be much easier for you to build everything!

Eric Meyer reset css is a good place to start: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

0
source

Source: https://habr.com/ru/post/1314683/

More articles:


All Articles