Vertically align two pieces of text with different font-sizes using CSS

Question

At the top of my page I want to have the title of the page aligned to the left of the screen with a short nav menu aligned to the right of the screen. I can achieve this using float but the two elements have different baslines ie the baseline of the text appears different. Is there any way to get this to work using css? I have a sample of what I'm trying to do up on jsfiddle http://jsfiddle.net/nBPCG/63/

Answer 1

Hi you can use display:inline-block in your h1

or see the Fiddle:- http://jsfiddle.net/nBPCG/101/

Answer 2

First I'd suggest using a ul to wrap the links rather than an h3 , that structure doesn't make sense. Then I'd just add some padding to the ul . Here's a cleaned up example of the markup:

<article >
<header>
    <h1>This is Title</h1>
    <nav>
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Works</a></li>
            <li><a href="">Blog</a></li>
            <li><a href="">Contact</a></li>  
        </ul>
    </nav>
    <div class="clr"></div>
</header>
</article>

And the styles:

body {
    font-family:"Verdana", Verdana, sans-serif;
    font-size: 1em;
    font-weight:400;
}

h1 {
    font-family:"Century Gothic", Verdana, sans-serif;
    font-size: 4em;
    font-weight:400;
    float: left;
    margin-left:10px;
}

header nav {
    margin-right: 10px;
    float: right;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 2em 0 0 0;
}

nav ul li {
    display: inline;
    font-size: 1.2em;
    font-weight:400;
}

nav a {
    padding: 0 1em;
    border-right: 1px solid #000;
}

nav li:last-child a {
    padding-right: 0;
    border-right: none;
}

.clr {clear:both;}

Fiddle: http://jsfiddle.net/nBPCG/98/