Expandable News Box going past footer

HTML & CSS
1

Hi, I am having a small problem. I have an expandable news box that works fine on a blank page but when I put it in another container it will hide other items in that container and then will go past the footer.

I have added my css code and my html code. I am obviously doing something wrong. My problem is with the /NEWS BOX/ code and below.

/* for Internet Explorer \\*/ 
html, body{height:100%;} 
/* */

html,body { 
margin:0;
padding:0;
min-height:100%;
font-size:12px; 
font-family:verdana, Arial, Helvetica, sans-serif; 
color: #000; 
background: #000 url(../images/dotted_black_bg.png) ;
text-align:center;
}

#wrapper {
width: 900px;
background: #fff;
margin: 10px auto;
padding: 0px;
text-align:left;
min-height:100%;
border:4px solid #FED049;
position:relative;
margin-bottom: -30px;
}
/* for Internet Explorer */
/*\\*/
* html #wrapper {
height: 100%;
}
/**/

#banner{
height: 200px;
background-image:  url(../images/areas.jpg);
background-repeat: no-repeat;
text-align: left;
}

#nav {
border-bottom:4px solid #FED049;
background:#333366;
color:#fff;
width:100%;
height:25px;
color:#fff;
text-align:center;
padding-top:5px
}

	
#content  { 
width: 100%;
background:#fff;
padding-bottom:25px; /*FOR FOOTER*/
min-height:100%;
}

#left {
margin:10px 0 10px 0;
width:295px;
background:#fff;
color:#000;
text-align:left;
float: left;
border-right: 2px solid #ccc;
padding:10px;
}

#right {
margin:10px 0 10px 0; 
float:right;
width:550px;
padding:10px;

}

.clearfooter {
height: 30px;
clear: both;
}

#footer{
position:relative;/*TO KEEP AT BOTTOM*/
width: 100%;
height:30px;
background: #333366;
color:#fff;
text-align:center;
font-size: 10px;
padding:3px 0;
}



hr  {
border: none 0;
border-top: 1px dashed #666666;
width: 50%;
height: 1px;
text-align: center; /*FOR IE*/
margin: 15px auto 5px auto; /*FOR FF*/
} 

.centeredImage {
text-align:center;
 margin:10px auto 8px auto;
}

	
/*NEWS BOX*/

#box1 { 
width:300px;
background:#fff;
position:relative;
}


#box1head {
position: absolute; left: 0px; top: 0px;
display: block;
width: 289px;
height: 50px;
background: url(../images/news-arrow-box-1_01.gif);
repeat: no-repeat;
}

#box1body {
position: absolute; left: 0px; top: 50px;
display: block;
width: 289px;
background-image: url(../images/news-arrow-box-1_02.gif);
repeat: repeat-y;
}

#box1body h3 {
font-size:14px;
color:blue;
padding:2px 20px 0 33px;
}

#box1body p {
font-size:12px;
color:red;
padding:2px 20px 2px 33px;
}
	
#box1body a:link,#box1body a:visited {
font-size: 10px;
color: orange;
text-decoration: underline;
}

#box1body a:hover {
font-size: 10px;
color: orange;
text-decoration: none;
}

.box1bottom {
position:relative;
display: block;
height: 32px;
margin-bottom:-32px;
background-image: url(../images/news-arrow-box-1_04.gif);
background-repeat: no-repeat;
background-position: bottom;
}

.right {
text-align: right;
}

This is my html code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/main_4.css" />


</head>

<body>
<div id="wrapper"> 
  <div id="banner"></div>
  <div id="nav">Navigation Here</div>
  <div id="content"> 
    <div id="left"> 
      <div id="box1"> 
        <div id="box1head"></div>
        <div id="box1body"> 
          <h3>TEST</h3>
          <p>Aenean mollis scelerisque ipsum. Duis tempor. Lorem ipsum dolor sit 
            a met, consectetur adipiscing elit. Suspendisse viverra, quam eget 
            euismod tincidunt, metus tellus fringilla neque, ut tempus ante nisl 
            eget ipsum. Donec feugiat augue. Ut feugiat. Integer euismod massa 
            ut enim. Cum sociis natoque penatibus et magnis dis parturient montes, 
            nascetur ridiculus mus. Nulla facilisi. </p>
          <p class="right"> <a href="#">Read More</a></p>
          <h3>TEST 2</h3>
          <p>Aenean mollis scelerisque ipsum. Duis tempor. Lorem ipsum dolor sit 
            a met, consectetur adipiscing elit. Suspendisse viverra, quam eget 
            euismod tincidunt, metus tellus fringilla neque, ut tempus ante nisl 
            eget ipsum. Donec feugiat augue. Ut feugiat. Integer euismod massa 
            ut enim. Cum sociis natoque penatibus et magnis dis parturient montes, 
            nascetur ridiculus mus. Nulla facilisi. Aenean mollis scelerisque 
            ipsum. Duis tempor.</p>
          <p class="right"> <a href="#">Read More</a></p>
          <h3>TEST 2</h3>
          <p>Aenean mollis scelerisque ipsum. Duis tempor. Lorem ipsum dolor sit 
            a met, consectetur adipiscing elit. Suspendisse viverra, quam eget 
            euismod tincidunt, metus tellus fringilla neque, ut tempus ante nisl 
            eget ipsum. Donec feugiat augue. Ut feugiat. Integer euismod massa 
            ut enim. Cum sociis natoque penatibus et magnis dis parturient montes, 
            nascetur ridiculus mus. Nulla facilisi. Aenean mollis scelerisque 
            ipsum. Duis tempor.</p>
          <p class="right"> <a href="#">Read More</a></p>
		   <h3>TEST 2</h3>
          <p>Aenean mollis scelerisque ipsum. Duis tempor. Lorem ipsum dolor sit 
            a met, consectetur adipiscing elit. Suspendisse viverra, quam eget 
            euismod tincidunt, metus tellus fringilla neque, ut tempus ante nisl 
            eget ipsum. Donec feugiat augue. Ut feugiat. Integer euismod massa 
            ut enim. Cum sociis natoque penatibus et magnis dis parturient montes, 
            nascetur ridiculus mus. Nulla facilisi. Aenean mollis scelerisque 
            ipsum. Duis tempor.</p>
          <p class="right"> <a href="#">Read More</a></p>
          <span class="box1bottom"></span></div>
      </div>
	  <div id="box"> 
        <hr />
        <div class="centeredImage"><a href="http://www.facebook.com/home.php#!/pages/New-York-State-Association-of-Chiefs-of-Police/131602526889810"> 
          <img src="images/like_us_on_facebook.gif" alt="like us on facebook"  width="130" height="49" /></a></div>
        <hr />
        <div class="centeredImage"><a href="http://nysamber.troopers.state.ny.us/" target="_blank"> 
          <img src="images/amber_alert.jpg" width="115" height="86"  alt="amber alert" /></a> 
        </div>
        <hr />
        <div class="centeredImage"><a href="about.php#accreditation"> <img src="images/accrdited_pin_small.gif" width="100" height="42"  alt="accreditation pin"><br />
          Accreditation</a></div>
        <hr />
        <div class="centeredImage"> <a href="kids.php" target="_blank"> <img src="images/fight_crime.gif" alt="fight crime invest in kids" width="130" height="36" /> 
          </a></div>
      </div>
    </div>
    <!--END LEFT-->
    <div id="right"> 
      
    </div>
    <!--END RIGHT-->
    <div class="clearfooter"></div>
  </div>
  <!--END CONTENT-->
  <div id="footer">/div>
</div>
<!--END WRAPPER-->
</body>
</html>

Thank you in advance. I appreciate any help offered.

2

I have added the page if that is easier.
New York State Association of Chiefs of Police

3

Add overflow hidden to the wrapper or content div. That contains the floats.

4

I did that and it hides text in the box when it reaches the bottom of the div. Also the news box does not “push down” images that are palced below it.

5

I don’t think I explained myself properly. What I want is when the box expands for the rest of the container to expand in the browser window. There must be something in my css code missing. I appreciate any help.

6

Hi, unless a box with overflow hidden had a limiting height declared there should be no reason why it would cut off text. But I havn’t ran your code so prob missed something. I’ll take a look later if no one else has.

7

Thanks, I have messed something up. I can place images in that float and it will expand everything. As soon as I put the box in, it doesn’t expand and it sits on the top of the images that are already in the float.

8

Thanks I solved it.