Can't Set DIV Equal To Another DIV HTML/Javascript

- 1 answer

for some reason, my wrapper div won't equal the same height as my maincontent div. I'll post the code and I would love if someone could help me understand why. Also, I can use jquery if need be


var wrap=document.getElementById('wrapper');
var left=document.getElementById('maincontent').style.height;;


<div id="wrapper">

    <!-- TemplateBeginEditable name="Main Content" -->

    <div id="maincontent">


    <!-- TemplateEndEditable --><!-- TemplateBeginEditable name="Background image" -->

    <div id="image" style="background-image: ;">



I don't know if I have guessed right, but . . .

One possible cause of what you describe is the presence of a float instruction in the maincontent DIV.

See this jsFiddle example

In the example, the wrapper DIV is the wrong height -- it ignores the presence of the maincontent DIV, and the maincontent DIV appears to be below it.

This is caused by the float:left instruction in the maincontent DIV. A float will remove that DIV from the HTML flow, and the parent DIV will be missing that height. In fact, the maincontent DIV is overflowing the wrapper DIV.


Place a overflow:hidden or overflow:auto on the parent DIV (that is, on the wrapper DIV).

See this jsFiddle demo of the solution


position:absolute and position:fixed will also remove DIVs out of the flow. However, they cannot be "fixed" by using overflow:________. Manually setting the height of the containing DIV, or using javascript or some other wizardry may be necessary.