Scott Scott - 10 days ago 5
HTML Question

CSS positioning for responsive header

I have a header with an image and an "hamburger" icon for a mobile navigation menu. What I am simply trying to do it display my logo at approx 75% of the available screen with the menu icon to the far right.

I have a master div container and then within it i have 2 divs which has the logo in the left div and menu icon in the right. For some reason I cannot get the menu to stay on the right in the same div container. Any suggestions?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
width: auto;
max-width: 90%;
min-width: 90%;
}
#menu {
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: white;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png"/>
</div>
<div id="menu">
<button type="button"><span>Menu</span></button>
</div>
</div>
<div id="mobileMenu">some content</div>
</body>
</html>

Answer

give specific width to both #logoContainer and #menu with display:inline-block;

#logoContainer{
  width:75%;
  display:inline-block;
  }
#menu{
  width:25%;
  display:inline-block;
  text-align: right;
  }
#menu button{
  margin-right:10px
  }
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<style>
    #container {
        width: 100%;
        max-width: 100%;
        border: 0px;
        margin: 0px;
        padding: 10px;
        background-color: blue;
    }

    #logoContainer {

        width: 75%;
        max-width: 75%;
        border: 0px;
        margin: 0px;
        background-color: blue;
    }

    #logo {

        width: auto;
        max-width: 90%;
        min-width: 90%;
    }

    #menu{

        float: right;
    }

    #mobileMenu {

        width: 100%;
        background-color: green;
        color: white;
        display: none;
    }
    </style>





</head>
<body>

<div id="container">
    <div id="logoContainer">

        <img id="logo" src="content/logo.png" />

    </div>

    <div id="menu">
        <button  type="button">
            <span>
                Menu
            </span>
        </button>

    </div>

    </div>

    <div id="mobileMenu">
    some content

   </div>



    </body>


    </html>