Jan.28

Equal Height in inner DIV

If we need the element of inner div have same height between the inner content. The content of both div wouldnot possible to same but in that case we need the same height border display between inner div. I have assumed the inner wrapper container have two block is need to same height as maximum contents height.

equal_inner_div_height

This might be possible solution using css and html code.

Style sheet file style.css

.wrapper{
width: 98%;
display:table;
}
.wrapper>div{display:table-cell;}
.left{
border:10px solid #0188ed;
margin-right:10px;
padding: 10px;
width: 49%;
}
.separator{ width: 1%;}
.right{
width: 49%;
border:10px solid #0188ed;
padding: 10px;
}
.header{
background:#0181ec;
height: 50px;
width: 98%;
border-top: 10px solid #ffffff;
border-top: 10px solid #ffffff;
padding: 10px 10px 20px 10px;
margin-bottom: 20px;
overflow: hidden;
}
.footer{
background:#0181ec;
height: 50px;
width: 98%;
border-top: 10px solid #ffffff;
padding: 10px;
}

 

Html File of the design index.html

<html>
<head>
<title>Equal Height in inner DIV</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header" title="Welcome to Pkbhandari.com"><h1>Welcome to Pkbhandari.com</h1></div>
<div class="wrapper">
<div class="left">
<p>My left content display here</p>
<p>Left</p>
<p>Left</p>
<p>Left</p>
<p>Left</p>
</div>
<div class="separator"></div>
<div class="right">
<p>Right content div which have little more content than left div</p>
<p>But we need the equal height to both div</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
</div>
</div>
<div class="footer">© copyright pkbhandari.com </div>
</body>
</html>

 

View Demo  or Download source code

possible other  jquery solution what i found on searching for this solution.

http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

 

Share this Story:
  • facebook
  • twitter
  • gplus

Leave a comment

Facebook Comment