Fluid HTML Page with one fixed column width problem

melc26 · #1 (**permalink**) Aug 24th, 2005, 14:22

Hi,

You can view my code here:
http://www.missmonkee.com/clive/mel.html

I have a problem whereby I have a design that has a max-width of 932px.
Now within this there is a fixed width for the left hand column. There are two extra columns on the right of this, that need to be fluid. So they need to shrink down with the window resizes to 800 x 600, but then only stretch back up to a maximum of 932px.

I know that max-width is not supported by IE and even if I did have max-width on my outer container (black), it would not then allow me to have a fluid layout
within this.

Can anyone help me at all? I'm not even sure if this is possible. Has anyone else attempted this bizarre design!? I DIDNT DESIGN IT! I wish we could change it.

Thanks, Mel

D3mon · #2 (**permalink**) Aug 24th, 2005, 21:46

This design may accomodate your needs:

Code: Select all

<html>
<head>
<title>Black Tomato</title>
<style type="text/css">
<!--
body {
 font-size:71%;
 font-family:verdana,arial,helvetica,sans-serif;
}

#containerFixed {
	max-width:932px;
	_width:expression(document.body.clientWidth > 932? "932px" : "auto" );
	height:200px;
	border: 1px solid black;
}

.homeMainLeftFixed {
	float:left;
	width: 393px;
	height:200px;
	border: 1px solid pink;
}

#containerVariable {
	margin-left: 393px;
	height:170px;
	border: 1px solid red;
}

.homeMainLeftVariable { 
 float:right;
 width:49%;
 max-width:49%;
 height:200px;
 border: 1px solid green;
}

.homeMainRightVariable {
 float:right;
 width:49%;
 max-width:49%;
 height:200px;
 border: 1px solid blue;
}
-->
</style>
</head>
<body>

<div id="containerFixed">	
	
	<div class="homeMainLeftFixed">FIXED left hand side</div>
	
	<div id="containerVariable">		

					
			
			<div class="homeMainRightVariable">Right side Variable</div>
			<div class="homeMainLeftVariable">Left side Variable</div>			
		
		

	</div>	

</div>
</body>
</html>

Worked ok in IE6, Firefox and Opera with only some minor spacing issues

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Fixed Width or Liquid Layout?	mwdesign	Web Page Design	3	May 10th, 2008 08:46
where can I find a fluid 3 column layout	Gerry	Web Page Design	7	Nov 2nd, 2007 22:48
Borders made from graphics, but fluid width and height	wickedmoon	Web Page Design	1	Aug 17th, 2007 11:20
fixed left column and variable right	obiron	Web Page Design	4	May 3rd, 2007 18:34
How to create html page of fixed size ?	aminuddin09	Introduce Yourself	10	Oct 21st, 2006 08:59

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Fluid HTML Page with one fixed column width problem