CODEWITHSUNDEEP
htmlcssalignment
mix
mix

Reputation: 7151

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

In the following example, I want the bottom of the site name text "site name" and the bottom of the menu text "menu 1 menu 2 menu 3" to align flush with the bottom of the container they're in (header). As it is now, the sitename text is some number of pixels above it's container's bottom edge, while the menu text is a different number of pixels above that same edge. I want both elements to be sitting on the same line.

It seems that using line-height can push it down through trial and error with different values, but the result isn't consistent across browsers (e.g. i can get them flush in Safari and Chrome, but then Firefox looks different). There has to be a better way?

Also, is there a better way to force the menu into that bottom-right corner other than the way I've done 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>

Upvotes: 5

Views: 7657

Answers (5)

tris timb
tris timb

Reputation: 993

If you can use viewport widths it can be done really nicely for any screen size.

#sitename h1 {
  font-size: 9vw;
  margin-bottom: -2.2vw;
}

This was useful because I was using the text as a graphics element in the background. Typically you wouldn't want to set your font-size with vw (but typically you also wouldn't want it flush with the element below).

Upvotes: 0

DHuntrods
DHuntrods

Reputation: 686

Do you have any kind of reset styles being applied? Each browser has different defaults for padding & margin on elements like headers and lists. If you reset everything at the beginning of your style sheet it'll make it much easier to line everything up!

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

Upvotes: 0

Sam Nabi
Sam Nabi

Reputation: 379

You don't need to wrap your h1 in a div. It's already a block-level element. 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>

Upvotes: 1

Ben Kulbertis
Ben Kulbertis

Reputation: 1713

I would suggest positioning the sitename relative to where it currently is, like so:

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

However, this isn't perfect because if different fonts are used, the spacing may be different. Thats not something that can be fixed with any CSS property (currently). You might consider an image? To maintain the same height at all times?

Upvotes: 0

Gert Grenander
Gert Grenander

Reputation: 17094

You could set a negative margin on #sitename h1. E.g.

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

The tricky part is to make it align exactly in all browser, since it differs a pixel or so between them.

Upvotes: 0

Related Questions