Solved

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

Posted on 2014-03-01
4
862 Views
Last Modified: 2014-03-19
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;
}
0
Comment
Question by:centem
  • 2
4 Comments
 

Author Comment

by:centem
ID: 39897722
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.
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 250 total points
ID: 39897736
Add this CSS class
header {
text-align:center
}

To your img class add
float:left

To nav ul {} add
float:right

To section {} add
clear:both

Remove height:100px from .container {}
0
 

Author Comment

by:centem
ID: 39898469
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>
0
 
LVL 5

Accepted Solution

by:
Neil_Bradley earned 250 total points
ID: 39899361
This should tick most of your boxes..
<!DOCTYPE HTML>
<head>
<title>Building Contractor</title>
    <style>
* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
	padding-bottom: 180px;}  /* must be same height as the footer */

#footer {
	position: relative;
	margin-top: -180px; /* negative value of footer height */
	height: 180px;
	clear:both;
	background: #0FF;
} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

.container {
	width: 800px;
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
}
header {
      border: 1px solid black;
}
.head-container {
	border: 1px solid red;
}
.heading {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	border: 1px solid yellow;
	width: 200px;
}
nav {
	border: 1px solid green;
width: 100%;
}
nav ul {
	list-style: none;
}
nav li {
	float: right;
}
nav a {
	font-weight: bold;
	text-decoration: none;
	padding: 1em 2em;
	border-right: 2px solid gold;
	display: block;
}
section {
      margin: 0 auto;
      height: 400px;
      width: 800px;
      border: 1px solid black;
}
footer {
      bottom: 0;
      border: 1px solid black;
}
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1%;
}	


    </style>


<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->
</head>
      
<body>
        <div id="wrap">

	<div id="main">
          <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 class="clearfix">
                        <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>
             
            </div>
	</div>

</div>

<div id="footer">
   <footer class="container">
                        <h3>This is the footer</h3>
  </footer>
</div>
	
</body>

Open in new window


You may need to play around with it to get it exactly how you want.
Stcky footer framework courtesy of http://www.cssstickyfooter.com/
Cheers,
N
0

Featured Post

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question