Dynamically changing height of div in another div

I am trying to allow the height of the div to dynamically change according to the number of elements inside the div. The whole idea of what i am trying to do is shown in the diagram below

The last div should be able to change dynamically. It seems that i have to set the height of the third inner div. If i don't, the div appears outside the main div.

Solutions that i have tried:

1) overflow: auto

2) trying not setting the height of the 3rd inner div.

Must i use javascript? can i don't use javascript? These solutions didn't work. Need some guidance.. Sorry if the question was repeated....

Answers


Hey now i think you should this

HTML

<div class="parent">
  <div class="child1">
    <div class="one">One</div>
     <div class="one">two</div>
  </div>

   <div class="child1">
    <div class="one">One</div>
     <div class="one">two</div>
  </div>


   <div class="child2">
     dynamic height
     </div>

</div>

Css

.parent{
border:solid 1px red;
}
.child1, .child2{
overflow:hidden;
  margin:10px;
  border:solid 2px green;
}

.one{
background:red;
  border:solid 1px black;
  padding:10px;
  float:left;
  margin:10px;
}

Live demo http://tinkerbin.com/i1R8emEb

Now change to height width or height according to your design ..


Don't give the div a fixed height, just use float:left; in your CSS.


Need Your Help

MySQL Query like not returning correct results

mysql collation sql-like

i've a MySQL query that should return some rows that have the letters Ö or Ü in it

Can anyone give me tips how to solve this using Graphs in C or Java?

java c graph

Can anyone give me tips how to solve this using Graphs in C or Java?