[SOLVED] Getting float to stretch parent vertically

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

[SOLVED] Getting float to stretch parent vertically

Post 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
Last edited by JayBird on Fri Jul 21, 2006 8:57 am, edited 1 time in total.
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post by JayBird »

Sorted

Used this CSS

Code: Select all

.container:after{ content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; }
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Pimp is a pimp. Uh, er, what I meant was, a brief MSN conversation and the thing is fixed.
Post Reply