problem with floating layers and overflowing content 1

southbeach · Jul 2, 2009

Every time I have to create a page where I use this layout it drives me crazy. It just seems that I cannot apply what I already know and cannot get it to work ... Perhaps, I really do not know ...

Code:

<body>
	<?php flush(); ?>
	<div id="fullbodycontent">
		<div id="leftnavbar">Left Bar</div>
		<div id="container">
			<div id="content">
				<?php echo 'broswer: '.strtoupper($browser['browser']).'<br />'; ?>
				This is the content page!<br />
				add about 60 lines here ...<br />
				This is the content page! last ...<br />
			</div>
			<div id="rightnavbar">The right NavBar</div>
		</div>
		<div style="clear: both;"></div>
		<p style="color: green">At the very edge ...</p>
	</div>
	<div style="clear: both;"></div>
	<iframe name="post_iframe" id="post_iframe"></iframe>
	<div id="blockScreen"></div>
	<div id="viewme"></div>
</body>

Code:

/* CSS Document */
	#fullbodycontent {
		width: 96%;
		min-height: 100% !important;
		<?php if(strtoupper($browser['browser']) != 'MSIE') { echo "height: auto;"; } ?>
		<?php if(strtoupper($browser['browser']) == 'MSIE') { echo "height: expression((document.getElementsByTagName('html')[0].offsetHeight - 4) + 'px');"; } ?>
		margin-left: auto;
		margin-right: auto;
		background-color: <?php echo BACKGROUNDCOLOR; ?>;
		border: 1px solid green;
	}
	#header {
		clear: both;
		height: 155px;
		width: 100%;
		background-color: #006600;
		z-index: 1;
		text-align: center;
		margin-top: -12px;
	}
	#leftnavbar {
		clear: both;
		float: left;
		width: 24%;
		min-height: 100% !important;
		<?php if(strtoupper($browser['browser']) != 'MSIE') { echo "height: 100%;"; } ?>
		<?php if(strtoupper($browser['browser']) == 'MSIE') { echo "height: expression((document.getElementsByTagName('html')[0].offsetHeight - 4) + 'px');"; } ?>
		background: url(<?php echo APPIMAGES; ?>leftbar.png) repeat-y;
		color: #000;
		background-color: #FFF;
		border-left: 1px solid <?php echo APPTHEMECOLOR; ?>;
		border-bottom: 1px solid <?php echo APPTHEMECOLOR; ?>;
	}
	#rightnavbar {
		float: right;
		width: 18%;
		background: url(<?php echo APPIMAGES; ?>rightbar.png) repeat-y;
		background-color: #FFF;
		min-height: 100% !important;
		<?php if(strtoupper($browser['browser']) != 'MSIE') { echo "height: 100%;"; } ?>
		<?php if(strtoupper($browser['browser']) == 'MSIE') { echo "height: expression((document.getElementsByTagName('html')[0].offsetHeight - 4) + 'px');"; } ?>
		border-right: 1px solid <?php echo APPTHEMECOLOR; ?>;
		border-bottom: 1px solid <?php echo APPTHEMECOLOR; ?>;
	}
	#container {
		width: 75%;
		min-height: 100% !important;
		<?php if(strtoupper($browser['browser']) != 'MSIE') { echo "height: auto;"; } ?>
		<?php if(strtoupper($browser['browser']) == 'MSIE') { echo "height: expression((document.getElementsByTagName('html')[0].offsetHeight - 4) + 'px');"; } ?>
		float: left;
		background-color: #FFF;
	}
	#content {
		float: left;
		width: 75%;
		min-height: 100%;
		<?php if(strtoupper($browser['browser']) != 'MSIE') { echo "height: 100%;"; } ?>
		<?php if(strtoupper($browser['browser']) == 'MSIE') { echo "height: expression((document.getElementsByTagName('html')[0].offsetHeight - 4) + 'px');"; } ?>
		color: <?php echo APPFONTCOLOR; ?>;
		border-bottom: 1px solid <?php echo APPTHEMECOLOR; ?>;
		background-color: #FFF;
	}
	#pagebreak {
		clear: both;
		width: 99%;
		background-color: <?php echo APPTHEMECOLOR; ?>;
		background: url(<?php echo APPIMAGES; ?>fill.png) repeat-x;
		margin-top: -20px;
	}
	#footer {
		clear: both;
		width: 100%;
		height: 220px;
		float: left;
	}
	.clear {
		clear: both;
	}

My left and right nav-bars are not expanding down with my content, what am I doing wrong?

Thank you all for your assistance!

--
SouthBeach

http://www.fpgroups.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

Vragabond · Jul 2, 2009

Two things I can see:

1. You never define what your elements should be 100% of. When elements have percentage height (or min-height), that needs to be 100% of something defined. Your #fullbodycontent is defined to be at a minimum height of 100%. 100% of the body, which is not defined and as such reverts to auto. Auto being just as high as the content, which is probably what you're seeing. If you want to use 100% to have it be the entire viewport (browser window), then you need to define body height and html height (body is a part of the html document and the same logic as mentioned above applies) to be 100%.

2. When an element has min-height defined, that is not it's actual height. If element A has min-height defined to be 500px but the height of the element is actually 300px, then element B, which is a child of A and has height set at 100% will be 300px high and not 500px high. I think this is what is causing your columns not to expand properly. I do believe the only way to have the columns properly extending all the way is to use faux columns.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

southbeach · Jul 3, 2009

Vragabond,

I am going to look at point (1) closely and see if this is where my problem lies.

Ironically, solution (2) is the way I went with in the end. It is kind of rewarding when you find that you have done something the way the experts recommend it's done.

Thanks,

--
SouthBeach

http://www.fpgroups.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

problem with floating layers and overflowing content 1

southbeach

Programmer

Vragabond

Programmer

southbeach

Programmer

Similar threads

Part and Inventory Search

Sponsor