Solved

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

Posted on 2014-03-01
4
874 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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 style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

734 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