How do I style a logo and menu options to be on the same level?

Question

I'm trying to create a banner with a background color of gray, for example. I want this banner to include the logo and the menu options.

I figure that I must have three div's, but when I put the logo and the menu options in it, I get it as three separate things, versus two things that are in one container.

Also, if someone would be so kind to critique my code, I would appreciate it so I improve.

Thank you in advance.

div.header_container {
    font-family: tamarillo-jf, sans-serif;
    font-style: normal;
    font-weight: 400;
    border: solid blue 10px;
}

div.logo_container {
    border: solid red;
    float: left;
}

h1.logo {
    padding: 10px;
    margin: 0;
    color: forestgreen;
    font-family: tamarillo-jf, sans-serif;
    font-style: normal;
    font-weight: 400;
}

div.nav_container {
    border: solid pink;
    float: right;
    overflow: auto;
    margin: 0;
}

li.option {
    display: inline;
    padding: 10px;
    list-style-type: none;
    font-size: 25px;
    margin: 0;
}

a {
    text-decoration: none;
    color: forestgreen;
}

<!DOCTYPE HTML>

<html>
    
    <head>
        <title>Home | Business</title>
        <link rel = "stylesheet" href = "style.css">
        <!--fonts-->
        <script src="https://use.typekit.net/yhm2vpr.js"></script>
        <script>try{Typekit.load({ async: true });}catch(e){}</script>
    </head>
    
    <body class = "home_page">
        
        <!-- "banner" with logo and navigation options -->
        <div class = "header_container">
            
            <div class = "logo_container">
                <h1 class="logo">Business Name</h1>
            </div>
            
            <div class = "nav_container">
                <ul class = "nav_ops">
                    <li class = "option"><a href="#about us">about us</a></li>
                    <li class = "option"><a href="#classes">classes</a></li>
                    <li class = "option"><a href="#services">services</a></li>
                    <li class = "option"><a href="#get involved">get involved</a></li>
                    <li class = "option"><a href="#contact us">contact us</a></li>
                    <li class = "option"><a href="#donate">donate</a></li>
                </ul>
            </div>
            
        </div>
        
        <p>Hello, there!</p>
    </body>
</html>

A couple quick suggestions: In your styles, there is no need for div.header_container. Simply .header_container will work. Also it's generally better to use dashes instead of underscores to name your classes and ID's. See http://stackoverflow.com/questions/1696864/naming-class-and-id-html-attributes-dashes-vs-underlines — Brad Thiessen, Oct 05 '16 at 02:28

score 0 · Answer 1 · answered Oct 05 '16 at 02:27

You have two options that I can see

Option 1 - Add this after the nav_container within the header_container

//html
<br class='clear'/>

//Styles
.clear {
  clear: both;
}

Option 2 - Remove the floats from the logo_container and nav_container and use the flex property on the header_container

.header_container {
  display:flex;
  justify-content: space-between;
  align-items: center;
}

How do I style a logo and menu options to be on the same level?

1 Answers1