[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

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

Posted on 2014-03-01
4
Medium Priority
?
892 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 1000 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 1000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

650 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