Web Design Forums

mudz · 03-10-2006, 07:51

Hi all,

I have a problem with floating two fixed-width columns in a layout I am working on.
What I am after is a 620 pixels wide left column and, on its right, a 384 pixels one. They both should be 100% high.

This is how I am trying to achieve this:

HTML Code:


<body>
	<div id="wrapper">
		<div id="grey_band"></div>
		<div id="white_band"></div>
	</div>
</body>

Code:

* {
		margin: 0;
		border: 0;
		padding: 0;
		}
		
body, html {
		height: 100%;
		}
		
#wrapper {
		width: 1004px;
		height: 100%;
		min-height: 100%;
		}
		
html>body #wrapper {
		height: auto;
		}		
		
#white_band {
		width: 620px;
		height: 100%;
		min-height: 100%;
		background-color: teal;		
		}
		
html>body #white_band {
		height: auto;
		}
		
#grey_band {
		width: 384px;
		height: 100%;
		min-height: 100%;		
		background: url(../img/grey_band.gif) repeat-y;
		float: right;
		}
	
html>body #grey_band {
		height: auto;
		}

But it does not seem to work. Making the wrapper 1008px wide helps, but only in IEWin. In Safari or Firefox only some pixels of the larger column are visible, and it's only a few pixels high.
Any suggestions? Thank you.

mudz · 03-10-2006, 08:01

Update:

it seems to work in Safari and Firefox if I do like this:

HTML Code:


<body>
	<div id="wrapper">
		<div id="grey_band"></div>
		<div id="white_band"></div>
	</div>
</body>

Code:

* {
		margin: 0;
		border: 0;
		padding: 0;
		}
		
body, html {
		height: 100%;
		}
		
#wrapper {
		width: 1004px;
		height: 100%;
		min-height: 100%;
		background: url(../img/wrapper_bg.gif) fixed repeat-y;
		}
		
		
#white_band {
		width: 620px;
		height: 100%;
		min-height: 100%;
		background-color: teal;		
		}
		
html>body #white_band {
		height: auto;
		}
		
#grey_band {
		width: 384px;
		height: 300px;
		min-height: 300px;		
		float: right;
		background-color: red;
		}
	
html>body #grey_band {
		height: auto;
		}
		
#logo {
		margin: 37px 0 0 37px;
		}

But in IEWin the left column (white_band) starts underneath the floated grey_band (which is on the right).. help?

mudz · 03-10-2006, 08:12

having added 2 pixels to the wrapper's width seems to have solved the problem.. is it the case, even if no box hacks had to be used given the lack of borders or margins whatsoever?

NiKnight · 12-10-2006, 19:15

hey mudz, you just forgot to put in the #white_band a float: left;
that should fix it

mudz · 13-10-2006, 03:46

I fixed the thing just by making the wrapper an extra 3 or 4 pixels wider. I think I tried the float: left and didn't work, but will try again.
Thank you

pgo · 13-10-2006, 11:31

If it's not working, you've got your math wrong somewhere...though it looks right.

I'll guarantee that it's the height declarations that are screwing up IE.

03-10-2006, 07:51	#1 (permalink)
mudz Senior Member Join Date: Aug 2005 Posts: 135	Silly problem with two fixed-width floated columns Hi all, I have a problem with floating two fixed-width columns in a layout I am working on. What I am after is a 620 pixels wide left column and, on its right, a 384 pixels one. They both should be 100% high. This is how I am trying to achieve this: HTML Code: <body> <div id="wrapper"> <div id="grey_band"></div> <div id="white_band"></div> </div> </body> Code: * { margin: 0; border: 0; padding: 0; } body, html { height: 100%; } #wrapper { width: 1004px; height: 100%; min-height: 100%; } html>body #wrapper { height: auto; } #white_band { width: 620px; height: 100%; min-height: 100%; background-color: teal; } html>body #white_band { height: auto; } #grey_band { width: 384px; height: 100%; min-height: 100%; background: url(../img/grey_band.gif) repeat-y; float: right; } html>body #grey_band { height: auto; } But it does not seem to work. Making the wrapper 1008px wide helps, but only in IEWin. In Safari or Firefox only some pixels of the larger column are visible, and it's only a few pixels high. Any suggestions? Thank you.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

03-10-2006, 08:12	#3 (permalink)
mudz Senior Member Join Date: Aug 2005 Posts: 135	having added 2 pixels to the wrapper's width seems to have solved the problem.. is it the case, even if no box hacks had to be used given the lack of borders or margins whatsoever?

12-10-2006, 19:15	#4 (permalink)
NiKnight Registered User Join Date: Oct 2006 Posts: 2	hey mudz, you just forgot to put in the #white_band a float: left; that should fix it

13-10-2006, 03:46	#5 (permalink)
mudz Senior Member Join Date: Aug 2005 Posts: 135	I fixed the thing just by making the wrapper an extra 3 or 4 pixels wider. I think I tried the float: left and didn't work, but will try again. Thank you

13-10-2006, 11:31	#6 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,340	If it's not working, you've got your math wrong somewhere...though it looks right. I'll guarantee that it's the height declarations that are screwing up IE.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)