Why is all content on my home page overflowing the body border?

Question

On my home page Kendall_Gregory.html, my body border is ignoring the contents in the body and setting an arbitrary border around the page. It ignores every image that is on the page and the divs around them. The same code works on other pages and i can't figure out why this is the exception.

https://jsfiddle.net/hgaLsaz6/3/

HTML

<div>
    <a href="Html/MenuPage.html">
        <img id="topMenu" src="http://s4.postimg.org/7636jv04p/menu_Top.png">
    </a>
</div>

<img id="headerImage" src="http://s16.postimg.org/uqbzk51yd/Header.png">

<div class ="card">
    <div class="no-hover"> 
        <!-- <span class = "caption"> Fade </span> -->
        <img class="left Fade" src="http://s16.postimg.org/monr28j6t/Fade_Mag.png">
        <!-- hover image -->
    </div>
    <div class="on-hover">
        <a href="Html/Fade.html">
            <img class="left Fade" src="http://s21.postimg.org/o0f1chw13/Xenia_Lally_Hover.png">
        </a>
    </div>
</div>


<!-- GE -->

<div class ="card">
    <div class="no-hover"> 

        <!-- <span class = "caption"> GE </span> -->
        <img class="whiteOverlay right GE" src="http://s16.postimg.org/6vislrw9x/image.png">
    </div>
    <div class="on-hover">
        <a href="Html/GE.html">
            <img class="whiteOverlay right GE" src="http://s21.postimg.org/6yhlwnrs7/GE_hover.png">
        </a>
    </div>
</div>


<!-- Kaleidoscope -->
<div class ="card">
    <div class="no-hover"> 
        <img class="left KALEIDOSCOPE " src="http://s16.postimg.org/5fcc0qzol/KALEIDOSCOPE_Thumb.png">

    </div>
    <div class="on-hover mt100">
        <a href="Html/Pantene.html">
            <img class="left KALEIDOSCOPE" src="http://s16.postimg.org/7q5c7t44l/KALEIDOSCOPE_Thumb_hover.png">
        </a>
    </div>
</div>

<!-- AOHH -->

<div class ="card">
    <div class="no-hover"> 
        <img class="right ArtofHealthyHair" src="http://postimg.org/image/n7subiald/">

    </div>
    <div class="on-hover">
        <a href="Html/AOHH.html">
            <img class=" right ArtofHealthyHair" src="http://s21.postimg.org/u56jpto4n/Artof_Healthy_Hair_Hover.png">
        </a>
    </div>
</div>  

<!-- Nexxus  -->
<div class ="card mt100">
    <div class="no-hover mt100"> 
        <img class=" left Nexxus" src="http://s16.postimg.org/e05nrx9ut/Nexxus.png">

    </div>
    <div class="on-hover mt100">
        <a href="Nexxus.html">
            <img class="left Nexxus" src="http://s21.postimg.org/g00qo0f3b/Nexxus_Hover.png">
        </a>
    </div>
</div>  


<!-- Covergirl -->
<div class ="card">
    <div class="no-hover"> 
        <img class="whiteOverlay right CoverGirl" src="http://s16.postimg.org/lh9ta0t2d/Cover_Girl.png">

    </div>
    <div class="on-hover">
        <a href="Html/CoverGirlByKendallG.html">
            <img class="whiteOverlay right CoverGirl" src="http://s21.postimg.org/6n05jwbc7/Cover_Girl_Hover.png">
        </a>
    </div>
</div>  

<!-- PRTR -->

<div class ="card">
    <div class="no-hover"> 
        <img class="whiteOverlay left PRTR" src="http://s16.postimg.org/ee6zrityd/PRTR.png">
    </div>
    <div class="on-hover">
        <a href="Html/RTR.html">
            <img class="whiteOverlay left PRTR" src="http://s21.postimg.org/edbj2s31j/RTR_Hover.png">
        </a>
    </div>
</div>

<!-- Pantene -->
<div class ="card">
    <div class="no-hover"> 
        <img class="whiteOverlay right Pantnene" src="http://s16.postimg.org/3xqvp6uxx/Pantnene.png">
    </div>
    <div class="on-hover">
        <a href="Html/Pantene.html">
            <img class="whiteOverlay right Pantnene" src="http://s16.postimg.org/wia0c5rmt/WIOL_Hover.png">
        </a>
    </div>
</div>

CSS

body{
    margin: 0px;
    border: black 10px solid;
    font-family: 'brandon_grotesque_regularRg', Arial, sans-serif;
    line-height: normal;
}


a{
    text-decoration: none;
    color: black;
}

#topMenu{
    right: 20px;
    position: fixed;
    letter-spacing: 4px;
    z-index: 24;
    -webkit-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern=1";

}

.MenuBar{
    text-align: center;
    width: 65%;
    margin:17 auto;
    text-decoration: none;
    letter-spacing: 2px;
    -webkit-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern=1";


}
.consocials{
    bottom: 40;
    margin-left: 70px;
    margin-right: 70px;
    width: 80%;
    text-decoration: none;
}

.consocials:hover{
    border-bottom:solid black 2px;
    padding-bottom: 20px;
    text-decoration: none;
    color: black;   
}

.socials{
    margin-right: 20px;
    margin-left: 20px;
    color: black;
    text-decoration: none;
    text-transform: uppercase;
}
.socials:hover{
    border-bottom:solid black 2px;
    padding-bottom: 15px;
    text-decoration: none;
    color: black;

}

.socials:active{
    text-decoration: none;
    color: black;
}

.center{
    text-align: center;
    margin: 0 auto;
}

.left{
    float: left;
    margin-left: 70px;
}

.right{
    float: right;
    margin-right: 70px;
}
.rightNoMargin{
    float: right;   
}

.bottom{
    bottom: 30px;
}

.hide{
    display: none;
}

.m0a{
    margin: 0 auto;
}
.m10a{
    margin: 10 auto;
}
.h100{
    height: 100%;
}

.w100{
    width: 100%;
}
.w85{
    width: 85%;
}

.w50{
    width: 50%;
}
.w49{
    width: 49%;
}

.w40{
    width: 40%;
}
.mb200{
    margin-bottom: 200px;
}

.mb100{
    margin-bottom: 100px;
}

.pb30{
    padding-bottom: 30px;
}

.FloatL{
    float: left; 
}

.FloatR{
    float: right; 
}

.tAc{
    text-align: center;
}

.iLb{
    display: inline-block;
}

.m3{
    margin-top: 3px;
}

.h90{
    height: 90%;
}
.h850p{
    height: 850px;
}


.vA{
    vertical-align: center;
    height: 100%;
}

.h75{
    height: 60%
}

.pl20p{
    padding-left: 19%;
}

.pR100px{
    padding-right: 75px;
}

.w450{
    width: 450px;
}

.absolute{
    position: absolute;
}
.relative{
    position: relative;
}

.mnh100{
    min-height: 100px;

}

.mt100px{
    margin-top: 100px;
}

.mt200px{
    margin-top: 200px;
}
.h700{
    height: 700px;
}

.h800{
    height: 800px;
}

.w89{
    width: 89%;
}

.mT20{
    margin-top: 20%;
}

.mt50p{
    margin-top: 50%;
}

Michael Benjamin · Accepted Answer · 2015-08-15T14:04:22.533

0

The reason your border isn't wrapping the image elements is because the image elements are floated and the container hasn't been cleared.

Anytime you float an image or any other object you take it out of the normal flow. This means that the parent container doesn't even know it exists.

There are several ways to address this issue – known as clearfix methods. In this case I've used the overflow property. Add overflow: auto to the container divs.

.no-hover {overflow: auto;}
.on-hover {overflow: auto;}

I tested this code and it solves the problem.

DEMO

Just keep in mind that when using the overflow property you can have different values (auto, hidden, scroll) each of which will have a different effect when content overflows the container. To understand what each value does you can refer to this article: MDN - CSS Overflow Property

Hope this helps. Good luck!

edited Aug 15 '15 at 14:04

answered Aug 15 '15 at 12:08

Michael Benjamin

346,931
104
581
701

This answer was downvoted after it was accepted by the OP and during an extended discussion with third-party users over various edits I made to the question. (The OP was not involved in the discussion.) Considering that these downvotes occurred at the same time I received criticism for helping the OP edit the question, I don't believe these downvotes relate to the quality of my answer. It seems that a moderator has deleted all the comments. – Michael Benjamin Sep 01 '15 at 14:21
1

and I'm here to make it right :-) – adhg Sep 06 '19 at 17:47

Why is all content on my home page overflowing the body border?

1 Answers1