Solved

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

Posted on 2014-03-01
4
857 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

863 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

Need Help in Real-Time?

Connect with top rated Experts

28 Experts available now in Live!

Get 1:1 Help Now