fluid layout with fixed position

paddyfields · 12-18-2012, 02:39 PM

Hi there.

Any help with this would be amazing, I've created a simple code below for what I am trying to do, but I can't get it to behave how I wish.

I want...

#topmenu and #sidemenu to be fixed when scrolling (which works)
#extracontent to have a fixed width and be floated to the right of the page (which works)
#middlecontent should resize to the width between #sidemenu and #extracontent when the browser is resized horizontally.

Is that last point possible? If so does anyone have any advice how I can acheive this? At the moment it pushes down the #extracontent and I'm pretty sure the fixed width will be sitting on top of some of #middlecontent

Any help would be great

Code:

<!DOCTYPE html>

	<head>
		
		<title>sweet layout</title>
	
		<style type="text/css" media="screen">
		
			#container {
			width: 100%;
			height: 1000px;
			}
			
			#topmenu {
			position: fixed;
			top: 0px;
			left: 0px;
			height:30px;
			width: 100%;
			background:red;		
			}
			
			#sidemenu {
			position:fixed;
			top: 30px;
			left: 0px;
			width: 200px;
			height: 100%;
			background: blue;		
			}
			
			
			#middlecontent {
			float: left;
			height: 100%;
			background: yellow;
			width: 100%;
			}
			
			
			#extracontent {
			float: right;
			width: 300px;
			height: 100%;	
			background: orange;	
			}
			
			
		</style>
		
	
	</head>
	
	<body>
	
		<div id="container">
	
			<div id="topmenu">fixed</div>
			
			<div id="sidemenu">fixed</div>
			
			<div id="middlecontent"></div>
			
			<div id="extracontent"></div>
	
		</div>
	
	</body>
	
</html>

Excavator · 12-18-2012, 03:25 PM

Goodmorning paddyfields,
Instead of specifying a width on you #middlecontent, just margin the sides to allow for the elements that sit there.

Like this -

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sweet layout</title>
<style type="text/css" media="screen">
html, body {
	height: 100%;
	margin: 0;
}
#container {
	width: 100%;
	overflow: auto; /*to clear floats*/
}
#topmenu {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 30px;
	width: 100%;
	background: #f00;
}
#sidemenu {
	position: fixed;
	top: 30px;
	left: 0px;
	width: 200px;
	height: 100%;
	background: #00f;
}
#extracontent {
	height: 1800px;
	width: 300px;
	margin: 30px 0 0;
	float: right;
	background: #f90;
}
#middlecontent {
	height: 1800px;
	margin: 30px 300px 0 200px;
	background: #ff0;
}
</style>
</head>
<body>
    <div id="container">
        <div id="topmenu">fixed</div>
        <div id="sidemenu">fixed</div>
        <div id="extracontent">scrolls</div>
        <div id="middlecontent">scrolls</div>
    <!--end container--></div>
</body>
</html>

Loosely based on this example.

paddyfields · 12-18-2012, 04:20 PM

Ah excellent, thank you. The margins on the #middlecontent make a lot of sense now you've laid it out for me.

Merry Christmas!