CODEWITHSUNDEEP
csshtmlheight
user1862483
user1862483

Reputation:

Same height elements

I'm trying to set the height of two divs which will be the height of tallest div

This is what I've tried so far:

HTML:

<div id="left">
    1. SOME TEXT HERE
</div>
<div id="right">
    <input type="radio" name="Group1" /> <font size="1.5px">NO</font>
    <input type="radio" name="Group1" /> <font size="1.5px">YES</font>
    <br />
    <div class="textToRight">
        <font size="1.5px">Text:</font> 
        <input type="text" class="boxAlignRight22" />
    </div>
</div>
<div style="clear:both"></div>

CSS:

#left {
    margin-top:5px;
    margin-left:1.4%;
    float:left;
    background:#FFFFFF;
    width:59.8%;
    text-align:left;
    padding:5px;
}

#right {
    margin-top:5px;
    margin-right:1.4%;
    float:right;
    background:#FFFFFF;
    width:34.8%;
    padding:1.5px 5px 1.5px 5px;
    text-align:left;
}

Upvotes: 0

Views: 142

Answers (4)

Tejesh
Tejesh

Reputation: 189

use javascript to make it very dynamic then, u can use jquery also to shorten this jQuery: $('#right').css.height($('#left').css.height()) this is to make same right side height equal to left side

using some script:

<head>

<style>
#content{
height:auto;
}
#left {
margin-top:5px;
margin-left:1.4%;
float:left;
background:#938922;
width:59.8%;
text-align:left;
padding:5px;

}

#right {
margin-top:5px;
margin-right:1.4%;
float:right;
background:#514261;
width:34.8%;
padding:1.5px 5px 1.5px 5px;
text-align:left;

}
</style>
<script>
function load()
{
var leftcont = document.getElementById('left');
var rightcont = document.getElementById('right');
var lh = leftcont.offsetHeight;
var rh = rightcont.offsetHeight;
if (rh>lh)  leftcont.style.height = rightcont.style.height=rh;
else       leftcont.style.height = rightcont.style.height=lh;
}
</script>
</head><body onload='load()'>
<div id ="content">
<div id="left">
1. SOME TEXT HERE
</div>
<div id="right">
<input type="radio" name="Group1" /> <font size="1.5px">NO</font>
<input type="radio" name="Group1" /> <font size="1.5px">YES</font>
<br />
<div class="textToRight">
    <font size="1.5px">Text:</font> 
    <input type="text" class="boxAlignRight22" />
</div>
</div>
<div style="clear:both"></div>
</div>
</body>

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

Try using some manipulation effect.

Here is the link for the perfect example.

http://www.vanseodesign.com/css/equal-height-columns/

Upvotes: 0

Waqas Ali
Waqas Ali

Reputation: 1529

You may do this by putting the height of both to 'auto'.

Upvotes: 0

Vainglory07
Vainglory07

Reputation: 5273

  <div class="main">
      <div id="left">
          1. SOME TEXT HERE
      </div>
      <div id="right">
          <input type="radio" name="Group1" /> <font size="1.5px">NO</font>
          <input type="radio" name="Group1" /> <font size="1.5px">YES</font><br />
          <div class="textToRight"><font size="1.5px">Text:</font> 
              <input type="text" class="boxAlignRight22" /></div>
          </div>
      </div>    
      <div style="clear:both">
  </div>

  <style>
  #left {
      border:solid #000 1px;
      float:left;
      height:100%;
      padding:5px;
  }

  #right {
      border:solid #000 1px;
      float:left;
      height:100%;
      padding:5px;
  }
  .main{
      height:100px;
  }
  </style>

try this one..hope this helps

Upvotes: 1

Related Questions