Problem:
https://postimg.cc/image/tunhwh8qj/
The trouble I am currently having is that the border around my body is not outlining everything. As I have recently learned I’m guessing this means an element is out of the flow due to floating? However I am not certain how to fix it in this case.
My html is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<img src="final.jpg" id="banner">
<ul id="nav">
<li class="links"><a href="index.html">Home</a></li>
<li class="links"><a href="planning.html">Location</a></li>
<li class="links"><a href="construction.html">Facilities</a></li>
<li class="links"><a href="evaluation.html">Attractions</a></li>
<li id = "endlink"><a href="evaluation.html" id="lastlink">Bookings</a></li>
</ul>
<div id="leftcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
<div class="slideshow">
<img src="1.jpg" width="600" height="450" />
<img src="2.jpg" width="600" height="450" />
<img src="3.jpg" width="600" height="450" />
</div>
</div>
<div id ="footer">
<p> fsafasfasf </p>
</div>
</body>
</html>
and my CSS is:
html{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
height: 100%;
}
#banner{
padding: 0px;
margin: 0;
display: block;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
border-bottom: 1px solid #7f7f7f;
border-top: 1px solid #7f7f7f;
}
#mainc {
float: left;
width: 654px;
background-color: white;
margin: 0;
padding-left: 8px;
padding-right: 4px;
height: 100%;
}
#leftcolumn {
padding-left: 3px;
float: left;
background-color: #dad8bf;
width: 290px;
border-right: 1px solid #7f7f7f;
height: 100%;
}
#footer {
clear: both;
position: relative;
bottom: 0.5px;
margin: 0;
background-color: #dad8bf;
border-top: 1px solid #7f7f7f;
}
#footer p{
margin: 0;
}
.links {
float: left;
margin: 0px;
border-right: 1px solid #7f7f7f;
}
#endlink {
float: left;
margin: 0px;
border-right: none;
}
#lastlink{
display: block;
width: 184px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
#lastlink:hover{
background-color: #999999;
}
a:link {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:visited {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover {
background-color: #999999;
}
a:active{
background-color: #999999;
}
.slideshow {
height: 483px;
width: 632px;
margin: auto;
padding: 0px;
}
.slideshow img {
padding: 0px;
border: 1px solid #ccc;
background-color: #eee;
}
thanks in advance guys!!
This is happening because your body has fix height of 100%.Change body tag css as:
if this doesn’t work then add following with this: