Jump to content

Stretch Div Height In Ie


Kenoriga
 Share

Recommended Posts

csshelp3.th.pngThe code given is only for the 3 dashed divs. How do you make such that the yellow div will fill the space between it and the blue div?
<div style="border:1 dashed green; position:absolute; top:0px; z-index:-1; width:196px; height:100%;"><div style="border:1 dashed yellow; position: static; width:196px; height:1px;"></div><div style="border:1 dashed blue; position:absolute; bottom:0px; width:196px; height:213px;"></div></div>

Link to comment
Share on other sites

Hmm, laying out pages with absolute positioning is not a good idea. Often things will add scroll bars where they're not needed, and things aren't flexible.Your yellow bordered <div> has 1px height, it's not going to stretch further than that.You should lay out your page using float and margins.

Link to comment
Share on other sites

Hmm, laying out pages with absolute positioning is not a good idea. Often things will add scroll bars where they're not needed, and things aren't flexible.Your yellow bordered <div> has 1px height, it's not going to stretch further than that.You should lay out your page using float and margins.
Whoops. I am sorry to have left out a few points.... The green div does not have a static/constant height. The blue div will always have a height of 213px and be placed at the bottom of the green div, while the yellow div will stretch like in my question.. I require the green div to overlap over the text. Currently, the text is in a div outside of the code given, and I used absolute positioning to make them overlap.. I used 100% height for the yellow bordered div, and it became as long as the green div. I tried using margin-bottom and padding-bottom, but they don't seem to set the dynamic height of the yellow div properly. :/Edit: solved using margin-top:-213px; and height:100%; for the yellow div! This only works for IE though. It then proceeds to screw FF up. Edited by Kenoriga
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...