asked on

Center div inside another div, move nav right, and footer to bottom

Hi,
First, I've searched in the internet and have not found a solution. I would like to center the div that contains the Hello World text, move the nav to the right and keep the footer at the bottom. Below are my html and css. Thank you.

////////////////HTML///////////////////////////

<!DOCTYPE HTML>
      <head>
            <title>Building Contractor</title>
            <link rel="stylesheet" type="text/css" href="styles.css" />
      </head>

      <body>
            <div class="container">
                  <header>
                        <img src="imgs/InnInKeyWestFlorida_bnr.png" />
                        <div class="head-container">
                              <div class="heading">
                                    <h1>Hello World</h1>
                                    <h2>Hello World</h2>
                              </div>
                        </div>
                  </header>
                  <nav>
                        <ul>
                              <li><a href="#">Home</a></li>
                              <li><a href="#">Projects</a></li>
                              <li><a href="#">Services</a></li>
                              <li><a href="#">Contact Us</a></li>
                        </ul>
                  </nav>
                  <section>
                        Here is the section element
                  </section>
                  <footer>
                        <h3>This is the footer</h3>
                  </footer>
            </div>
      </body>

</HTML>

//////////////////CSS////////////////////////////////////////

body {
      margin-top: 0;
}
.container {
      height: 100px;
      width: 800px;
      max-width: 90%;
      margin-left: auto;
      margin-right: auto;
}
header {
      border: 1px solid black;
}
.head-container {
      display: inline-block;
      border: 1px solid red;
}
.heading {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      border: 1px solid yellow;
}
nav {
      border: 1px solid green;
}
nav ul {
      list-style: none;

}
nav li {
      display: inline;
}
nav a {
      font-weight: bold;
      text-decoration: none;
      padding: 1em 2em;
      border-right: 2px solid gold;
}
section {
      margin: 0 auto;
      height: 400px;
      width: 800px;
      border: 1px solid black;
}
footer {
      bottom: 0;
      border: 1px solid black;
}

centem

ASKER

Also, I decided to change the color of the container class and it revealed that the container only sits on the upper right hand side of the page. It does not seem to have all the other elements within it.

SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

centem

ASKER

Thanks. How can I make the image stay inside the header container? When I remove float left and put margin-left 0 and padding-left 0 it still sits toward the center. I tried putting height 100% on body to get it to stretch to the bottom of the screen.

Here is my updated css and html.

body {
      margin-top: 0;
      background-color: grey;
      height: 100%;
}
.container {
      width: 800px;
      max-width: 90%;
      margin-left: auto;
      margin-right: auto;
      background-color: white;
}
header {
      border: 1px solid red;
      height: auto;
      text-align: center;
}
img {
      float: left;
}
.head-container {
      display: inline-block;
      background-color: steelblue;
}
.heading {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      border: 1px solid yellow;
}
nav {
      border: 1px solid green;
      clear: both;
}
nav ul {
      list-style: none;
      float: right;

}
nav li {
      display: inline;
}
nav a {
      font-weight: bold;
      text-decoration: none;
      padding: 1em 2em;
      border-right: 2px solid gold;
}
section {
      margin: 0 auto;
      height: 400px;
      width: 800px;
      background-color: orange;
      clear: both;
}
footer {
      bottom: 0;
      background-color: steelblue;
}

<!DOCTYPE HTML>
      <head>
            <title>Building Contractor</title>
            <link rel="stylesheet" type="text/css" href="styles.css" />
      </head>

      <body>
            <div class="container">
                  <header>
                        <img src="imgs/InnInKeyWestFlorida_bnr.png" />
                        <div class="head-container">
                              <div class="heading">
                                    <h1>Hello World</h1>
                                    <h2>Hello World</h2>
                              </div>
                        </div>
                  </header>
                  <nav>
                        <ul>
                              <li><a href="#">Home</a></li>
                              <li><a href="#">Projects</a></li>
                              <li><a href="#">Services</a></li>
                              <li><a href="#">Contact Us</a></li>
                        </ul>
                  </nav>
                  <section>
                        Here is the section element
                  </section>
                  <footer>
                        <h3>This is the footer</h3>
                  </footer>
            </div>
      </body>

</HTML>

ASKER CERTIFIED SOLUTION

Neil_Bradley

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial