I'm learning HTML/CSS/PHP and building a website from scratch in my spare time.
The footer in the following code stays at the bottom where I want it unless I use the content <div>, then it shoots to the right of the content.
I can't figure out why?! I've commented out the float: left and that doesn't make a difference.
Thanks for your help.
style.css:
html {
font-family: sans-serif;
}
.wrap {
min-width: 600px;
width: 85%;
margin: auto;
float: left;
}
.navigation {
padding: 5px;
background: black;
text-align: center;
}
.navigation li {
display: inline;
padding-right: 10px;
}
.navigation a {
text-decoration: none;
color: white;
font-size: 20;
font-family: fantasy;
}
.navigation a:hover {
text-decoration: underline;
}
.content {
background: #f8f8f8;
float: left;
width: 80%;
}
header {
text-align: center;
margin: auto;
}
header a {
text-decoration: none;
color: black;
}
h5 {
font-size: 120px;
font-family: cursive;
font-variant: small-caps;
margin-top: 10px;
margin-bottom: -100px;
text-shadow: 2px 1px 3px gray;
}
h6 {
font-size: 32px;
}
p {
padding-bottom: 10px;
}
header.php:
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="/css/style.css">
<title></title>
</head>
<body>
<div class="wrap">
<header>
<a href="/index.php"><img src = "/images/banner_logo.jpg"></a>
</header>
<div class="navigation">
<ul>
<li><a href="/index.php">Home</a></li>
<!--<li><a href="/blog/index.php">Blog</a></li>-->
<li><a href="/pics/index.PHP">Pics</a></li>
<li><a href="/contact/index.php">Contact</a></li>
<li><a href="/about/index.php">About</a></li>
<li><a href="/produce/index.php">Produce</a></li>
</ul>
</div>
footer.php:
<!--begin footer -->
<br><small>Copyright 2015</small>
</div>
</body>
</html>
index.php (with content):
<?php include "header.php"; ?>
<!--begin page content-->
<h2>Welcome</h2>
<div class="content">
<p>Wander around and see if I've figured out what to do here.</p>
<h4>Would you like to tell me you are here?</h4>
<form action="process.php" method="post">
First Name: <input name="fname" type="text" />
<input type="submit" />
</form>
</div>
<br>
Because clearing divs is a common problem that you will run across frequently, you will likely want to create a utility class.
.clearfix:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
.clearfix {
display: block;
}
.clearfix {
display: inline-block;
}
Apply it to the div directly, or sometimes, you'll find that you want to toss it in a div at the end of your oddly floating clear.
<div class="clearfix"></div>
or
<div id="leftnav">
...
<div class="clearfix"></div>
</div>
you need to apply a clearing to the footer, since your .content element is floated. The easy way is to wrap your footer content with a meaningful tag (e.g. <footer>) and then give this style
footer {
clear: both;
}
A better refined way is to use the .clearfix class as used in the html5 boilerplate applied directly to the .content element, e.g.
.content:before,
.content:after {
content: " ";
display: table;
}
.content:after {
clear: both;
}
Commenting out the float: left in the .content section of the CSS does indeed force the footer onto the next line. See: http://jsfiddle.net/Lu7w03mh/1/.