CSS Blank :( Make parent DIV stretch in height

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

CSS Blank :( Make parent DIV stretch in height

Post by Chris Corbyn »

I'm know I've done this plenty before and it's something that's completely dumb to have stumbled on but what am I missing to make the little DIV blocks cause the outer div to stretch to full height?

This is a simplified, brightened up snip to make it clear what I mean (that grey div hiding away in the background should be stretched with the colored ones.

Code: Select all

<div id=&quote;content&quote; style=&quote;width: auto; padding: 8px; background-color: #CCCCCC&quote;>
	<div style=&quote;height: 100px; width: 35%; position: relative; float: left; background-color: yellow&quote;></div>
	<div style=&quote;height: 100px; width: 65%; position: relative; float: right; background-color: orange&quote;></div>
</div>
Image

It's gonna be a long day :P
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Doh! I hadn't made the parent DIV a floater :oops:

[SOLVED]
djot
Forum Contributor
Posts: 313
Joined: Wed Jan 14, 2004 10:21 am
Location: planet earth
Contact:

Post by djot »

So why don't you post the updated code?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Hmm... sorry I had thought I explained :P I'll make it clearer ;)

Code: Select all

<div id=&quote;content&quote; style=&quote;width: auto; padding: 8px; background-color: #CCCCCC; position: relative; float: left&quote;>
	<div style=&quote;height: 100px; width: 35%; position: relative; float: left; background-color: yellow&quote;></div>
	<div style=&quote;height: 100px; width: 65%; position: relative; float: right; background-color: orange&quote;></div>
</div>
Post Reply