jonmo1990 jonmo1990 - 6 months ago 17
CSS Question

How do I position divs inside header?

I am having trouble with the header div. When viewed it seems to expand to 1000px even though I dont think I have that defined in the css. I just want the navigation on the left side and a logo or words on the far right side. How do I position it inside or fix the header div?



body {
margin: 0;
height: 100%;
}
#container {
width: 100%;
height: auto;
background-color: gray;
}
#header {
width: 75%;
height: 50px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
.navbar {
width: 25%;
height: 30px;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
.navbar li {
float: left;
}
li a {
display: block;
color: red;
padding: 10px;
}
li a:hover {
background-color: #111;
}
.sitename {
float: right;
}
#content {
width: 75%;
height: 600px;
margin-left: auto;
margin-right: auto;
background-color: purple;
}
.box1 {
width: 25%;
height: 300px;
float: left;
background-color: red;
}
.box2 {
width: 25%;
height: 300px;
float: left;
background-color: orange;
}
.box3 {
width: 25%;
height: 300px;
float: left;
background-color: green;
}
#footer {
width: 75%;
height: 50px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}

<div id="container">
<div id="header">
<div class="navbar">
<ul>
<li><a href="#home">Home</a>
</li>
<li><a href="#news">News</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li><a href="#about">About</a>
</li>
</ul>
<div class="sitename">Hello</div>
</div>

</div>
<div id="content">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div id="footer"></div>
</div>




Answer

Try this

            body {
              margin: 0;
              height: 100%;
            }
            #container {
              width: 100%;
              height: auto;
              background-color: gray;
            }
            #header {
              width: 75%;
              height: 50px;
              margin: auto;
              background-color: white;
            }
            .navbar {
              height: 30px;
              width: 100%;
              padding: 10px 0;
            }
            .navbar ul {
              list-style-type: none;
              margin: 0;
              padding: 0;
              overflow: hidden;
              background-color: white;
              float: left;
            }
            .navbar li {
              float: left;
            }
            li a {
              display: block;
              color: red;
              padding: 10px;
            }
            li a:hover {
              background-color: #111;
            }
            .sitename {
              float: right;
              margin-right: 20px;
            }
            #content {
              width: 75%;
              height: 600px;
              margin-left: auto;
              margin-right: auto;
              background-color: purple;
            }
            .box1 {
              width: 25%;
              height: 300px;
              float: left;
              background-color: red;
            }
            .box2 {
              width: 25%;
              height: 300px;
              float: left;
              background-color: orange;
            }
            .box3 {
              width: 25%;
              height: 300px;
              float: left;
              background-color: green;
            }
            #footer {
              width: 75%;
              height: 50px;
              margin-left: auto;
              margin-right: auto;
              background-color: yellow;
            }
<html>

<head>
  <title>Home</title>
</head>

<body>
  <div id="container">
    <div id="header">
      <div class="navbar">
        <ul>
          <li><a href="#home">Home</a>
          </li>
          <li><a href="#news">News</a>
          </li>
          <li><a href="#contact">Contact</a>
          </li>
          <li><a href="#about">About</a>
          </li>
        </ul>
        <div class="sitename">Hello</div>
      </div>

    </div>
    <div id="content">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
    <div id="footer"></div>
  </div>
</body>

</html>

Comments