Setting the height of a div based on the height of another div

Question

I am trying to get a div (overlay) floating overtop of 3 other divs. It cuts a little bit into the 1st (horsebanner) and 3rd (footer) divs and entirely over the 2nd (midbackground). I want the 2nd div to increase automatically in size as the floating div increases so that the amount that the floating div cuts into the 3rd div always stays the same.

Here's the html:

 <body> <div id="navigation"> </div> <div id="main"> <div class="overlay"> </div> <div class="horsebanner"> </div> <div class="midbackground"> </div> <div class="footer"> </div> </div> </body>

Here the css:

#main { width: auto; height: 650px; background-color: #FF6; margin-top: 0; } #main .horsebanner { width: auto; height: 150px; background-color: #F90; margin-top: 0; } #main .midbackground { width: auto; height: 450px; background-color: #CCC; margin-top: 0; } #main .footer { width: auto; height: 50px; background-color: #333; margin-top: 0; } #main .overlay { width: 300px; height: 100px; margin-left:100px; margin-right:100px; background-color:#0F0; position: absolute; }

I'm new to the html world and could use some advice. Again, trying to get the midbackground DIV to adjust bigger as the overlay DIV gets bigger.

Let me get this straight - you want the .overlay div's height to be more than the middle div, and vertically eat into the space of the first and third divs? — Terry
– Terry, Commented Oct 12, 2013 at 15:13

6elephants · Accepted Answer · 2013-10-12 16:41:17Z

I think you want the whole thing to stay one static size i.e the size of who ever is viewing its window. SO basically you must change all the divs to be a certain percentage height what ever you want.

For this example I used 26% for the top, 48% for the middle, and 26% for the footer. I used jquery to center the overlay horizontally(i admit it is a bit hackey but it is basically setting a margin top to 25% of the page on both when the page initially loads and when you resize it... you will need to adjust the percentages to however big you want the top bar to look)

here is the css, I kept the html the same apart from adding the jquery script tags

#main { width: auto; background-color: #FF6; margin-top: 0; } #main .horsebanner { width: auto; height: 26%; background-color: blue; margin-top: 0; } #main .midbackground { width: auto; height: 48%; background-color: #CCC; margin-top: 0; } #main .footer { width: auto; height: 26%; background-color: red; margin-top: 0; } .overlay { width: 50%; height: 50%; margin-left: 25%; background-color:#0F0; position: absolute; }

and this is what the jquery looks like so that everything stays the same when you change window size etc..

$(document).ready(function(){ $('#main').height($(this).height()); $('.overlay').css('margin-top',$('body').height()/4); }); $(window).resize(function(){ $('#main').height($(this).height()); $('.overlay').css('margin-top',$('body').height()/4); });

and of course the jsfiddle http://jsfiddle.net/pc8Rs/3/

Collectives™ on Stack Overflow

Setting the height of a div based on the height of another div

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related