CODEWITHSUNDEEP
htmlcsscss-position
Clive Atkins
Clive Atkins

Reputation: 543

DIV is overflowing onto footer section HTML CSS

I have an issue with text from a DIV overlapping the footer section of my webpage. There are 2 DIVS side by side which are a main text area and a links section. However when I type in the left hand box it appears to overflow and fill over the footer section.

Here is a very simple example of my issue, hope someone can show where I am going wrong.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body{
    margin: 0px;
    padding: 0px;
    text-align: left;
    background-color: rgb(242, 242, 242);
    }
.wrapper {
    width: 940px;
    height: auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    margin-top: 0px;
    min-height: 500px;
    background-color: #FFF;
}
.textarea{
    width: 65%;
    float: left;
    height: auto;
    background-color: #FFF;
    min-height: 0px;
    background-color:#F00;
}
#rightmenu{
    padding: 0px;
    width: 271px;
    height: 100%;
    float: right;
    margin-right: 20px;
}
</style>
</head>
<body>  
<div>
  <div class="wrapper">
  <div class="textarea"> Text Area
    <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>This DIV overflows my footer</p>
  </div>
<div id="rightmenu">
Side Menu Links
</div>
</div>
<footer>
Footer Section
  </footer>
</div>
</body>
</html>

Thanks in advance

Upvotes: 1

Views: 1997

Answers (2)

John23
John23

Reputation: 199

On your footer, try "clear:both" in your CSS.

So:

footer{
    clear:both;
}

It will make your footer clear any floated divs (move below them).

Upvotes: 0

Craicerjack
Craicerjack

Reputation: 6332

Have you tried using the clear style? Have a read here - http://css-tricks.com/the-how-and-why-of-clearing-floats/

Or using overflow good example here - http://css-tricks.com/almanac/properties/o/overflow/

Upvotes: 2

Related Questions