height of div element is not working

Question

i have created a website and having trouble with its height. i tried almost all ways but same results. I want to change the height of element dynamically.

please check the website (left side of the content.) Website Link

its HTML is:

<div id="leftBar">&nbsp;</div>

its CSS is:

#leftBar {
    background: url("images/leftbar-bg.gif") no-repeat scroll 0 0 #7A2652;
    float: left;
    height: 100%;
    margin-bottom: 7px;
    margin-right: 12px;
    min-height: 925px;
    width: 75px;
}

please check friends and help me..

thank you

Will this `
` contain any content? If not consider applying the image as a background on `#site` That way, you wont need to worry about height. — Alex, Mar 02 '12 at 12:41
ref: http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths — Yoshi, Mar 02 '12 at 12:47
@Muzammil: "but i can't add this background image to #site" why? — Alex, Mar 02 '12 at 12:51
I think [this][1] is related [1]: http://stackoverflow.com/questions/7049875/height100-not-working — Manatok, Mar 02 '12 at 12:56
@Muzammil: "can u tell me how i do this.." Sure check my answer. You shouldn't really add markup for a visual effect. — Alex, Mar 02 '12 at 13:01
http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/ Checkout this link. — Muhammad Sannan Khalid, Mar 02 '12 at 12:43
thank you very much Alex Thomas .. i am exhausted .. haven't sleep since 3 days .. :( — Muzammil, Mar 02 '12 at 13:16

score 3 · Answer 1 · answered Mar 02 '12 at 12:43

You're using a percentage (%) value to set the height. However, this will only work if the element's parent has a fixed height - or, if the parent also has a percentage, it's parent's height must be fixed, and so on. If you use percentages all the way up to the body/html node, then it will take it's implicit parent's height, which is the dimensions of the window.

score 1 · Answer 2 · answered Oct 07 '13 at 14:07

You can easy to use this javascript:

<script type="text/javascript">
window.onload = function() {
var h = $('#tdleftcontent').height();
document.getElementById('cntt').style.height = h + 'px';
};
</script>

<table>
<tr>
<td id="tdleftcontent">
<div style="height:auto;" id="cntt">
    It will be expand ...
</div>
</td>
</tr>
</table>

score 1 · Accepted Answer · answered Mar 02 '12 at 13:00

@Muzammil wrote:

can u tell me how i do this..

Sure... Make these changes:

Delete:

<div id="leftBar"></div>

Change:

#site{
  width:966px;
  margin:0 auto 25px;
  border: 7px solid white;
  background:url("images/leftbar-bg.gif") no-repeat scroll 6px 85px #7A2652;
}

#inner {
    float: left;
    margin: 12px 0 12px 75px;
    padding-left: 12px;
    padding-right: 8px;
    background-color: white;
}

Sorted.

score 0 · Answer 4 · answered Mar 02 '12 at 12:58

you need to review your DOM structure, I see 2 solutions for this issue

1) use a table with 2 columns: first colum will take the role of #leftBar, second colum will take the role of #inner; this way both columns will always have the same height;

2) using a box model:

1.remove completely #leftBar;

2 set to #inner padding-left : 75px ;

3 set to #inner background : url("images/leftbar-bg.gif") no-repeat scroll 0 0 #7A2652;

4 create an inner wrapper for #inner and set it's background to #fff (white) at the

end you'll have:

<div id="inner">
     <div id="innerWrapper">
         ....all the code ...
     </div> <!-- closed inner Wrapper -->
</div> <!-- closed inner --->

score -1 · Answer 5 · answered Mar 02 '12 at 12:43

if you can change your html structure, include the inner div in left bar and set a padding-left of the left bar equals to the desired width;

html:

<div id="leftBar">
    <div id="inner"></div>
</div>

css:

#leftbar{
   padding-left:75px
   background: url("images/leftbar-bg.gif") no-repeat scroll 0 0 #7A2652;
}

#inner{
    background:#fff;
}

height of div element is not working

5 Answers5