Fluid HTML Page with one fixed column width problem

melc26 · 08-24-2005, 03:27 PM

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

bazz · 08-24-2005, 04:41 PM

If you're minimum design resolution is 800x600, then I would try to use a container div of 100% (where you have told the body and html to be 100% also), and then fix the contents of the left div at XXXpx. Then make either, the right div fixed with the middle div as a % or make both the divs % widths.

In my own site with a three column layout headed by a full width div, I made the left and rght divs fixed and the middle a % and it's flexible from 800 x 600 to the one above 1024 (can't remember now). They do look different (perhaps comparitively odd) but if you don't compare them (well what user would?), it looks equally OK in all of them - as OK as it is

By the way, why has your design a max width of 932px?
Bazz

melc26 · 08-24-2005, 05:20 PM

The maximum width was 932px because the client wanted it like that, the rest of their site is 932px, and I am only redesigning the homepage. We did advise them against this and then stupidly told them we could do the content at variable width on the right hand side to allow for shrinking down to 800 x 600, and then to resize up to a max width of 932px.

I really dont see how this can be done, can you?

Just had a meeting about it.

s
Ta Bazz!

bazz · 08-24-2005, 07:54 PM

If you wish to post the code or pm me I could try to work somthing out but what I am thinking at the mooment (i know, I'm being dangerous again

), is that you could set a div to fit 100% of the screen at 1024. Within that a centered container div of xx%, which would equate to 932px. Then as you reduce the resolution to 800 x 600, the 932px equivalent would reduce proportionately, to fit in the 800x600 screen.

What I can't tell yet is, how would it look in the 800 viewport at that size. And I haven't calculated what % 932px is of the 1024 resolution.

Have you considered how much easier it might be to redesign their site?

Might be worth considering because if you design the homepage in symantic code, then it might just be a case of copying and pasting to apply that new code to all their pages. just a thought. Also, it would give a better value finished product for the client too. Having said that, my cynicism suggests that if they only want you to design the homepage, maybe they are going to apply the code to their other pages themselves?

Bazz

antizip · 08-24-2005, 10:39 PM

Code:

<html>
<head>
<title>Black Tomato</title>
<script language="javascript">
ie5 = false;
if (navigator.appVersion.indexOf("MSIE")!=-1)
	ie5 = true;
function reSize() {
	var x = document.getElementById('containerFixed').style;
	var y = document.getElementById('homeMainVariable').style;
	if(document.body.clientWidth>932||window.innerWidth>932){
		x.width=932+'px';
		y.width = 539+'px';
	}else{
		x.width=(ie5?document.body.clientWidth-4:window.innerWidth-4)+'px';
		y.width = (ie5?document.body.clientWidth:window.innerWidth)-392-5+'px';
	}
	setTimeout("reSize()",10);
}
</script>
<style type="text/css">
<!--
body {
 margin:0 2px 0 2px;
 font-size:71%;
 font-family:verdana,arial,helvetica,sans-serif;
}

#containerFixed {
	width:932px;
	height:200px;
	background-color:black;
}

#containerVariable {
	width:100%;
	height:170px;
	background-color:red;
}

.homeLeftFixed {
 float:left;
 width:393px;
 background-color:pink;
}

#homeMainVariable {
 float:left;
 width: 539px;
 height:100px;
 background-color:yellow;
}

.homeMainLeftVariable {
 float:left;
 width:50%;
 height: 100px;
 background-color:green;
}

.homeMainRightVariable {
 float:right;
 width:49.9%;
 height: 100px;
 background-color:blue;
}
-->
</style>
</head>
<body onLoad="reSize()">

<div id="containerFixed">

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

		<!-- START: THIS WHOLE CONTAINER HAS TO BE SHRUNK -->
		<div id="homeMainVariable"> 
			<div class="homeMainLeftVariable">Left side Variable</div>
			<div class="homeMainRightVariable">Right side Variable</div>
		</div>
		<!-- END: THIS WHOLE CONTAINER HAS TO BE SHRUNK -->

	</div>	

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

it involves javascript ... but i dont see any other way out of it

_Aerospace_Eng_ · 08-25-2005, 02:22 AM

Maybe this site will help you. Its the basic concept that you are after. If you remove the right column and the right margin from the content you get your layout. http://bonrouge.com/2+2.php

bazz · 08-25-2005, 11:34 AM

you got a split personality?

starting off as mel and then becoming antizip.

Anyhoo, can you post the code or a link to the real site plz.

Bazz