Div height is zero while it (should) contain(s) elements - html

Question

members,
I'm having troubles with my HTML code. I am trying to make somekind of youtube. But when I try to create this:
How it should look1
But this is how it looks when I try to make it in HTML:
http://jsfiddle.net/4u64jb5w/3/
<div class="Video">
<div class="BlackRect"></div>
<div class="Video-content">
<h2 class="Titel">This is a video title..</h2>
<div class="Video-footer">
Gebruikersnaam
</div>
</div>
</div>
.Video {
display:block;
position:relative;
margin-top: 100px;
}
.BlackRect{
Width:250px;
height:150px;
background-color:#000;
float:left;
}
.Titel {
color: #34495e;
display:block;
font-size: 25px;
float:left;
position:absolute;
top:0;
margin-left: 270px;
padding: 0;
}
.Video-content{
/*nothing to see here yet*/
}
.Video-footer {
position: absolute;
bottom: 0px;
left:0px;
}
I've noticed while inspecting the code in google chrome that the divs all have a width but no height. I think it has something to do with my positioning in CSS but I don't know exactly what I did do wrong.
How can I get this to like the picture I posted?
Any help is appreciated!
Thank you in advance
UPDATE!:
When I give the divs a static height I get the belonged result but how is it possible that I have to do so?

Answer 1

You've given position: absolute; for child elements like title1 and footer. But the immediate parent is position: static; so they were misaligned.
Other than that, instead of having margin-left for video-content, it's preferable to make it float left. it will be very generic and also can make it responsive easily.
.Video {
display:block;
position:relative;
margin-top: 100px;
}
.BlackRect{
Width:250px;
height:150px;
background-color:#000;
float:left;
}
.Video-content {
float: left;
position: relative;
margin-left: 10px;
height: 100%;
min-height: 150px;
}
.Titel {
color: #34495e;
display:block;
font-size: 25px;
margin-top: 0px;
}
.Video-footer {
position: absolute;
bottom: 0px;
}
DEMO

Answer 2

You've got compounded problems here. The first one is that elements that are position:absolute; do not create space inside their parent container. So first your a tag collapses because .Tite1 doesn't take up space, and then the .video-content container collapses because neither does .Video-footer. This equals zero height for that entire block.
Your second problem is that elements that are floated aren't by default considered in their parent's stacking context. So if all the elements in a parent are 'floated', the parent element has no height. This is the case for your .BlackRect element.
To break down:
<!-- no height because all children/grandchildren produce 0 height -->
<div class="Video">
<!-- doesn't create height because floated -->
<div class="BlackRect"></div>
<!-- doesn't create height because all children/grandchildren pos absolute -->
<div class="Video-content">
<!-- collapses because .Tite1 doesn't create height -->
<a href="#">
<!-- doesn't create height because position absolute -->
<h2 class="Titel">This is a video title..</h2>
</a>
<!-- doesn't create height because position absolute -->
<div class="Video-footer">
Gebruikersnaam
</div>
</div>
</div>
There isn't much to be done if all the elements in .Video-content are positioned absolute, but you can force .BlackRect to create space through a few different methods, the easiest is by applying overflow:hidden to the .Video wrapper.
.Video {
display:block;
position:relative;
margin-top: 100px;
overflow:hidden;
}

Answer 3

You do not need floats and the only absolutely positioned element should be the one you want at the bottom
.Video {
display: block;
position: relative;
margin-top: 100px;
}
.Video a {
text-decoration: none;
}
.BlackRect {
width: 250px;
height: 150px;
background-color: #000;
}
.Titel {
color: #34495e;
font-size: 25px;
font-style: italic;
}
.Video-content {
position: absolute;
left: 270px;
right: 0;
top: 0;
bottom: 0;
}
<div class="Video">
<div class="BlackRect"></div>
<div class="Video-content">
<h2 class="Titel">This is a video title..</h2>
<div class="Video-footer">
Gebruikersnaam
</div>
</div>
</div>

Answer 4

You're halfway there. Instead of floating .Titel you need to float the .Video-content, since it's a sibling of .BlackRect:
.Video-content{
float:left;
margin-left:20px;
height: 150px;
position:relative;
}
Notice I've given it a margin so the text stands off from the video, given it the same height as .BlackRect, and positioned it relative. I positioned it relative to do a little trick with the footer:
.Video-footer {
position:absolute;
bottom:10px;
}
This may have been where you were going with the absolute and relative positioning, but let me explain what I did anyway: When a parent div has a position of relative, any child div of the parent with a position of absolute and will be positioned absolutely within that parent container only (in other words, absolute relative to the parent, not to the page). It looks like that's what you were after, the code just needed to be simplified.
Everything else just needed to be simplified by removing unnecessary selectors:
.Video {
margin-top: 100px;
}
.BlackRect{
width:250px;
height:150px;
background-color:#000;
float:left;
}
.Titel {
color: #34495e;
font-size: 25px;
margin-top:10px;
}
/*to remove the underline*/
.Video-content a{
text-decoration:none;
}
Here's an updated jsFiddle

Answer 5

Did Few twerks and came up with this
Check Fiddle Fiddle
The CSS:
.Video {
position:absolute;
display:block;
background-color:gray;
width:100%;
height:60%;
}
.BlackRect{
Width:250px;
height:150px;
background-color:#000;
float:left;
}
.Titel {
color: #34495e;
display:block;
font-size: 25px;
float:left;
position:absolute;
top:0;
margin-left: 270px;
padding: 0;
}
.Video-content{
/*nothing to see here yet*/
}
.Video-footer {
margin-top:30%;
float:right;
}