'Border not covering whole site - elements out of flow?

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!!

htmlcss


Solution 1:[1]

This is happening because your body has fix height of 100%.Change body tag css as:

height:auto;
min-height: 100%

if this doesn't work then add following with this:

overflow:auto;

Solution 2:[2]

Probably better NOT to use the body element for your container. Instead, just add

<div class="container"></div>

around your code and in your CSS changehtml to body and body to div.container.

body{
    font-family: sans-serif;
    background-color:#464E54;
    height: 100%;
}

div.container{
    width: 960px;
    margin: auto;
    background-color: white;
    border: 3px solid black;
    padding: 0;
}

Edit: I completely missed the 100%, that's gotta be it.

Solution 3:[3]

Add overflow: hidden to your body element. When elements are floated it will not push the parent container height past it unless there is a clearer

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Harry Joy
Solution 2
Solution 3 Chris

Related Questions