Page 1 of 1

[SOLVED] Getting float to stretch parent vertically

Posted: Fri Jul 21, 2006 8:30 am
by JayBird
I am currently converting a desing to CSS.

The design can be seen working here - http://beta1.oconnorhrpartner.com/test.php

Look at the above design in IE, then Firefox...see the difference?

In IE, everything currently looks as it should, but in Firefox, the yellow menu doesn't expand down to fill that gap.

My html

Code: Select all

<div class="outer">
	<div class="container">
		<div class="menu"><?php require("menu.php"); ?></div>
		<div class="header"><div class="headerLogo"><img src="/imgs/logo.jpg" width="161" height="60" alt="O'Connor HR Partner" /></div></div>
		<div class="contentArea">
		  <p>Some content here</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		</div>
		<div class="clearer">&nbsp;</div>
	</div>
	<div class="footer"><div class="leftFooter">Left</div><div class="rightFooter"><?php require("footer.php"); ?></div></div>
</div>
MY CSS

Code: Select all

/* CSS Document */

body
{
	background-color:#ffffff;
	margin-left: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	background-image: url(/imgs/bg.gif);
}

/*//////////////////////////////////////////*/
/* STYLES RELATING TO THE LAYOU OF THE SITE */
/*//////////////////////////////////////////*/

/* Used to centre the site in the browser */
.outer { text-align: center;}
.container { position: relative; text-align: left; margin: auto; padding:0 9px 0 0; width: 768px; background-color:#FFFFFF; background-image:url(/imgs/shadow.gif); background-position:right; background-repeat:repeat-y; }


.menu { position: relative; width:205px; background-color:#e3ae2b; height:100%; float:left; clear:right;}

.header { position: relative; width:563px; height:60px; background-color:#000000; float:right; 
			background-color:#000; background-image:url(/imgs/arrBlack.gif); 
			background-position:left; background-repeat:no-repeat; }
	
.headerLogo { float:right; }

.contentArea { position: relative; float:right; clear:right; width:543px; background-color:#FFFFFF; padding:10px; }

/* little hack to make float containers expand around the float */
div.clearer {clear: left; line-height: 0; height: 0; }

/* footer */
.footer { padding:0 9px 0 0; margin: auto; text-align: left; height:83px; clear:right; width: 768px; background-image:url(/imgs/shadow.gif); background-position:right; background-repeat:repeat-y; }
.leftFooter { float:left; width:205px; height:80px; background-color:#969696; border-top:medium solid #585858; }
.rightFooter { float:right; width:563px; height:80px; background-color:#d1d1d1; border-top:medium solid #b2b2b2; }
Any ideas how to make it correct in Firefox.

Thanks

Mark

Posted: Fri Jul 21, 2006 8:56 am
by JayBird
Sorted

Used this CSS

Code: Select all

.container:after{ content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; }

Posted: Fri Jul 21, 2006 8:57 am
by RobertGonzalez
Pimp is a pimp. Uh, er, what I meant was, a brief MSN conversation and the thing is fixed.