CODEWITHSUNDEEP
htmlcss
lakshmen
lakshmen

Reputation: 29064

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 belowenter image description here

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....

Upvotes: 0

Views: 158

Answers (2)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32162

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 ..

Upvotes: 1

WolvDev
WolvDev

Reputation: 3226

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

Upvotes: 1

Related Questions