Div Has No Height Even If It Has Content

 function changePhoto(id) {     var y = document.getElementById("baza_big_photo_img");     var z = "/assets/galeria_images/" + id + ".jpg";     y.src = z; }

.baza_big_photo {   width: 484px;   height: auto;   box-sizing: border-box;   border: 1px solid black;   display: block;   background-repeat: no-repeat;   background-position: center center;   background-size: 100% 100%;   margin: 3px;   overflow: hidden;}.baza_zdjecia {   width: 118px;   height: 86px;   margin: 2px;   box-sizing: border-box;   border: 1px solid black;   overflow: hidden;   float: left;}

<div class="box_1">    <div class="box_1_header">Header</div>    <div class="box_1_content">        <div class="baza_big_photo"><img src="" id="baza_big_photo_img"></div>        <div class="br2"></div>        <div class="baza_zdjecia" id="tn_galeria01" onclick="changePhoto(this.id)"></div>        <div class="baza_zdjecia" id="tn_galeria02" onclick="changePhoto(this.id)"></div>        <div class="baza_zdjecia" id="tn_galeria03" onclick="changePhoto(this.id)"></div>        <div class="baza_zdjecia" id="tn_galeria04" onclick="changePhoto(this.id)"></div>        <div class="baza_zdjecia" id="tn_galeria05" onclick="changePhoto(this.id)"></div>        <div class="baza_zdjecia" id="tn_galeria06" onclick="changePhoto(this.id)"></div>        <div class="baza_zdjecia" id="tn_galeria07" onclick="changePhoto(this.id)"></div>        <div class="baza_zdjecia" id="tn_galeria08" onclick="changePhoto(this.id)"></div>    </div></div>

Why does my div have no height?

The reason why the height or the containers is 0 is because you are floating all the content inside them and floated elements don't expand the height (or width) of their parents.

As you are floating all elents in row it has 0 height and therfore so has .container.

To prevent this, you can :

1. set overflow:hidden; on the containers demo
2. clear the float with a block element at the end of the container with clear:both; demo

You can also check this question for reference : How do you keep parents of floated elements from collapsing?

Div with background and some content has no height

in order to make your div 100% height, all parent containers should have same height property set to 100%, otherwise your div won't have any height.
For some reason I think that what you want to achieve should be done in another way.

div with no content and percentage height is not appering

You can use css min-height property to set a min height of the div element.Right now parent element has not height.That's why its not showing

     html, body
     {
    height: 100%;
     }
     #adelediv {
           float: left;
           height:100%;
           width: 100%;
           background-image: url(hello.gif);
           background-size: cover;
        }

https://www.your-plugin.com

Height of parent div is zero even if it has child with finite heights

Seems like you got a case for the clearfix class.

So I'm guessing you're floating the child div and that's why the parent div's height is 0.
When you use floats, the parent doesn't adapt to the height of the children.

You can apply the 'clearfix' classes to the parent of the floating elements (of course you need to have it in your stylesheet) and it will add an insivible '.' at the end. Your parent will then have the correct height.

Note, it's cross platform, compatible IE6 +, Chrome, Safari, Firefox, you name it!

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

css - relative DIV has no height

You want your hr on the bottom of the first div, right ?

However, this is not working because the parent div have an default height: auto property.

This mean that the parent div will have the height of his children.

When you set a position: absolute on a child, you are breaking this system.

The parent will no longer take care of his child.

So, if you want to make it works, you have two solutions:

- set a custom height (height: 100px) on the parent div (not good)
- remove the absolute position on the child section (default :position: relative)

div {  position: relative;  margin: 0 30%;}
div section {  height: 100px;  background-color: yellow;}
hr {  height: 2px;  background-color: blue;}

<div>  <section></section></div>
<hr>

.div1 div img{
   width: 100%;
   display: block;
   float: left;
}

<div class="div1">
  <img src="image1.jpg" />
  <img src="image2.jpg" />
  <img src="image3.jpg" />
</div>

.div1 img:first-child {
   position: static;
}