CODEWITHSUNDEEP
htmlcss
Nick
Nick

Reputation: 1277

100% height overflowing container div

http://jsfiddle.net/GJBEm/

I have a .video div with the height and width set to 100%. But currently, the height of the .video div 'overflows' the .stream div which contains it (it seems it adds the height of the .top div).

To clarify, I'm trying to get the .video div to 'fill' the .stream div, without any overlapping/overflow.

Any ideas?

Thanks.

EDIT: Solved it by having the .top div float: left and setting it's width to 100%. Removing the padding on the .top div and instead, adding the padding directly to the paragraph element and finally removing the float: left from the .video div. http://jsfiddle.net/pyQMb/

Upvotes: 0

Views: 371

Answers (2)

Robert
Robert

Reputation: 3074

I'm not 100% sure what your trying to accomplish but I'm assuming you want the .video div to be inside the .stream div and not overflow outside of it. If that's the case then add overflow: hidden; to your .stream class like this.

.stream {
    position: absolute;
    left: 100px;
    top: 100px;
    border: 1px solid #333333;
    width: 400px;
    height: 300px;
    color: #FFFFFF;
    overflow: hidden;
}

If that's not what your trying to accomplish please add what you want to get done in your question.

Upvotes: 0

Luc Laverdure
Luc Laverdure

Reputation: 1480

If you have floating issues, I recommend you take a look at clearfix:

http://www.webtoolkit.info/css-clearfix.html

To add class="clearfix" to the parent element to any floating elements.

If not fixing the height to an absolute value with css may do the trick.

Upvotes: 0

Related Questions