I have two div elements same as the image bellow.

Div 1 : It show contents from server, so can not know the height Div 2 : It's height should be same as the height of div 1.

I have no experience in HTML (CSS), so I dont know how to do this. Please help me in this case.

Thank a lot.

I have two div elements same as the image bellow.

Div 1 : It show contents from server, so can not know the height Div 2 : It's height should be same as the height of div 1.

I have no experience in HTML (CSS), so I dont know how to do this. Please help me in this case.

Thank a lot.

• javascript
• html
• css

• possible duplicate of How do I achieve equal height divs (positioned side by side) with HTML / CSS ? – danielnixon Commented Jan 20, 2015 at 4:27

4 Answers 4

Try this: Example(http://jsfiddle/dzcvaxyx/)

<div id="wrapper">
    <div id="one">
        <h1>DIV 1</h1>
        <h4>content</h4>
        <h4>content</h4>
        <h4>content</h4>
        <h4>content</h4>
    </div>
    <div id="two">
        <h1>DIV 2</h1>
    </div>
</div>

#one, #two {
    width:150px;
    border:1px solid red;
    margin:10px;
    padding:10px;
}

#wrapper {
    margin:0 10px;
    display:flex;
}

Use a wrapper div. under which your div1 and div2 will have height 100%. The content of div1 will set the height which will be picked by div2. Similarly, if div2 get bigger content it autocratically stretches itself.

HTML

 <div class="container">  
     <div class="Div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.   
     Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.   
     </div>  
 </div>  

CSS

.Div1, .Div2 {  
    float: none;  
    padding: 20px;  
    vertical-align: top;  
}  
.container {  
    display: table;  
}  
.Div1 {  
    width: 400px;  
    background-color: LightSlateGrey;  
    display: table-cell;  
}  
.Div2 {  
    width: 200px;  
    display: table-cell;  
    background-color: tan;  
}  

Check out this : Fiddle

Both the divs will take same height irrespective of its content length.

check the fiddle sample below

HTML

<div id="one"></div>
<div id="two"></div>

CSS

#one, #two{
    display:inline-block;
    width:150px;
    border:1px solid red;
    margin:0 10px;
    vertical-align:top;
}
#one{
    height:200px;
}

Script

$("#two").height($("#one").height());

Fiddle Demo

use flexbox

.flexbox {      
  display: -webkit-flex;        
  display: -ms-flexbox;     
  display: flex;
  overflow: hidden;
}
.flexbox .col {
  flex: 1;
  padding: 20px;
  background:orange;
    border: 1px solid black;
}

<div class="flexbox">
  <div class="col"><h3>I ffasdfam lfisted ffasdf ac turpiasdfs egfasdfsafestas.</p></div>
  <div class="col"><p>Pefsdfsdaflledsfntesque hfsadfbitant morfsdafbi trdsfsdfissdafdsafsdafstique senesafdfasdfctus etsdaf netsdafus et malesuada fames ac turpis egestas. Vesdafsdafstibulum tsdafsdafortor quasdafsdfsm, feugidsfsdafsdat vitaedasf, ultricsdafsies esdafget, temposadfsar sitfsd amefsdat, antsdafdase.</p>
    <p>Donsdafsdafsec eu ldsfaibdsfsafero sitdsafsdf ametsdafds quadasfm egsdafestas sasfsdafemper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <p>Pesdafsdfllentesque habitsdafsdafsadant mogdffdsrbi trisasfdsdaftique sendsafsdafectussdaf sdafet sdafnetus et malasdfasfdsesuada famsdafes ac turpsafdis egestasadfs. Vestibulsadfum tosdafrtasfdor quasfdasdfasdafm, feugiat viaFdsftae, ultricies eget, temsaddfpor sit dsafamet, ante.</p>
    <p>Pellentesque hsfdfsdafabitant sdaforbi trsadfistique senectusadfs et netussdaf et malessdafuada fdsafames ac tusadfdsarpis egestas.</p>
  </div>
  <div class="col"><p>Pesdafsdafllsdafsdafentesque habisadftant mdassdafforbi trisdafsdstique senecsasdafsdafsddftus et netudasfsds et malesuada fameasfdss acsdaf tsdafsdafurpis egeasfdfstas.</p></div>
</div>