centem
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/InnInKeyWestFlor ida_bnr.pn g" />
<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;
}
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/InnInKeyWestFlor
<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;
}
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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/InnInKeyWestFlor ida_bnr.pn g" />
<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>
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/InnInKeyWestFlor
<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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER