CODEWITHSUNDEEP
css
markdsievers
markdsievers

Reputation: 7309

Aligning h1 with navigation bar

Server side developer here, trying to teach myself some styling.

I was trying to replicate the header section (id=topbar) from this site. My initial efforts have failed to align the h1 (scott hanselman) with the navigation list items (about , blog etc) - I was mostly experimenting with float: left and display: inline to overcome the block nature of the h1 - I failed!

On playing with the CSS in the chrome dev tools, I've not understood how he has aligned those items nicely in containerInner. I've found when I toggle the inherited margin property (line 4-9 of the css) the nav items fall below the h1 as I would expect as a block element.

My question is, what is making the h1 not take all available horizontal space? Seems like my guess of float and display properties missed the mark.

Here is my efforts thus far: HTML

<!doctype html>
<head>
    <meta charset="utf-8">
    <title>first last</title>
    <link rel="stylesheet" href="blog_style.css" type="text/css" />
</head>

<body>
    <div class="container">
        <div class="top-ribbon-outer">
            <div class="top-ribbon-inner">
                <h1>first last</h1>
                <nav>
                    <ul>
                        <li>item1</li>
                        <li>item2</li>
                        <li>item3</li>
                        <li>item4</li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</body>

</html>

CSS:

body {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    margin-left: 50px;
}

.top-ribbon-outer {
    width: 100%;
    height: 50px;
    color: white;
    background-color: black;
    position: relative;
}

.top-ribbon-inner {
    height: 20px;
}

h1 { 
    margin-bottom: 0px;
    margin-top: 0px;
    float: left;
    /*display: inline;*/
}

li { 
    float: left;
    padding-left: 15px;
    padding-right: 15px;
}

ul {
    list-style-type: none;
}

Upvotes: 0

Views: 9172

Answers (2)

Nikola R.
Nikola R.

Reputation: 1173

No need for setting parent's height. Just use overflow: hidden and it will correctly cover it's floating children

CSS:

body {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    margin-left: 50px;
}

.top-ribbon-outer {
    width: 100%;
    color: white;
    background-color: black;
    position: relative;
}

.top-ribbon-inner {
    overflow: hidden;
}

h1 { 
    margin: 0;
    float: left;
    padding: 5px;
}
nav {
 float: right;
}

li { 
    float: left;
    padding-left: 15px;
    padding-right: 15px;
}

ul {
    list-style-type: none;
}

Demo

Upvotes: 0

Sachin
Sachin

Reputation: 40970

You need to use display:inline-block for ul and h1 header. So try this

h1 { 
    margin-left: 10px;
    margin-top: 10px;
    float: left;
    display: inline-block;
}

ul {
    list-style-type: none;
    display:inline-block;
    float:right;
}

JsFiddle

Upvotes: 2

Related Questions