2 replies [Last post]
Techno-Hero
Techno-Hero's picture
Offline
newbie
Last seen: 12 years 24 weeks ago
Timezone: GMT-5
Joined: 2010-06-22
Posts: 2
Points: 3

Some help on how to fix this, if possible, would be much appreciated.

I've got two div tags. One inside the other. I want my outer div 'container' to be longer than the inner div it contains. However, even when I specify the height for the outer div in CSS it doesn't want to go past the size of the inner div.

What I want to do is specify a height for the outer div. And when the content in the inner div reaches that height limit overflow will kick in and provide a vertical scroll bar. I do not want the scroll bar to appear unless the specified height has been met, as I will be adding and removing content in that area. I do not want my outer div to be too large, as I may want to add different content under it.

HTML

<div id="newscontainer">
<div class="news">
<p class="date_posted">6/10/10 - Posted by <strong>Name</strong></p>
<p class="update"> 
<img src="Pictures\Yunari.png" class="yunari" \> Update and content here. </p>
</div>
 
<div class="news">
<p class="date_posted">6/10/10 - Posted by <strong>Name</strong></p>
<p class="update"> 
<img src="Pictures\Yunari.png" class="yunari" \> Another update and more content here. </p>
</div>
 
</div>

CSS

#newscontainer {
position: absolute;
top: 8em;
left: 19em;
text-align: left;
width: 520px;
height: 700px;
overflow-y: auto;
}
 
.news {
color: white;
background-color: #161616;
padding: 10px;
padding-top: 0px;
margin-right: 25px;
border: 2px solid #669999;
min-height:130px;
width: 500px; 
 
box-shadow:5px 5px 5px #FFFFFF;
-moz-box-shadow: 5px 5px 5px #FFFFFF;
-webkit-box-shadow: 5px 5px 5px #FFFFFF;
}

Screenshot

The blue behind the .news areas is the outer div's background. It is blue so the issue can be seen, but will really be transparent. I am also aware that the box-shadow will not work in IE at this point.

Thank you in advanced.

jon19870
jon19870's picture
Offline
Enthusiast
Lancashire, England, UK
Last seen: 7 years 46 weeks ago
Lancashire, England, UK
Joined: 2007-01-05
Posts: 195
Points: 194

The blue colour is not the

The blue colour is not the background of the outer div, it is the border of the .news divs. The outer div is actually doing what you want it to do, change the outer div's height to 200px and you will see.

Techno-Hero
Techno-Hero's picture
Offline
newbie
Last seen: 12 years 24 weeks ago
Timezone: GMT-5
Joined: 2010-06-22
Posts: 2
Points: 3

I'm pretty sure that the blue

I'm pretty sure that the blue is the background of #newscontainer. I just totally failed to put the "background-color: blue;" in the code provided. Sorry about that.

But, the really mysterious thing is... it's working the way I wanted it to now. Which is weird, because I was changing #newscontainer's height from between 20px and 1000px and it wouldn't move at all, unless I changed the size of the .news div. I restarted my computer, opened my files, viewed the page in my browser, and instead of the blue being where it is in the screen shot, it's at the 700px I have specified for height. The same specification I had when I took the screen shot.

Thank you for the reply, though.