1 reply [Last post]
sdm038
sdm038's picture
Offline
newbie
Last seen: 11 years 16 weeks ago
Timezone: GMT+1
Joined: 2010-08-13
Posts: 1
Points: 2

hi there

forgive me if im asking the obvious, ive scoured the web looking for a solution to this but so far no luck - ive seen a lot of css examples showing how to create 3 columns with the left and right columns fixed and the centre fluid, but not the other way round - so basically id like the middle column with the left and right columns fluid

can anyone steer me in the right direction? is this even possible?

kind regards

steve

Debayan Gupta
Debayan Gupta's picture
Offline
Regular
Last seen: 9 years 23 weeks ago
Timezone: GMT-4
Joined: 2010-08-10
Posts: 45
Points: 51

Yes, it's possible

Note: Most interfaces of this type have problems with horizontal scrolling. If you use pixel values instead of percentages (see code below).. well.. it's not very.. umm.. nice.

Anyway,
What do you want in the middle ?

Do you want text on both sides with a fixed background in the middle ?

Or is there going to be something else in the middle ? (for this to work across browser's you'll need to use something special for ie6 (as "position:fixed") won't work there) - maybe an eval with javascript as the margin-top... I can write it if you need something like that).

Do all three need to fit within a certain width, or should the two on the sides stick to the edges ?

This is a general solution :

<!DOCTYPE html>
<html>
 
<head>
	<meta charset="utf-8"/>
	<title>3 Column Layout</title>
 
	<style type="text/css">
body, html {height:100%}
body {margin:0;padding:0;text-align:center}
 
#left, #right {width:40%;background:yellow;float:left}
 
#middle {width:20%;height:100%;position:fixed;margin-left:40%}
 
#right {float:right}
 
 
	</style>
</head>
 
<body>
 
 
<div id="left">
	<p>Random Text</p><p>Random Text</p><p>Random Text</p>
	<p>Random Text</p><p>Random Text</p><p>Random Text</p>
	<p>Random Text</p><p>Random Text</p><p>Random Text</p>
	<p>Random Text</p><p>Random Text</p><p>Random Text</p>
	<p>Random Text</p><p>Random Text</p><p>Random Text</p>
	<p>Random Text</p><p>Random Text</p><p>Random Text</p>
	<p>Random Text</p><p>Random Text</p><p>Random Text</p>
	<p>Random Text</p><p>Random Text</p><p>Random Text</p>
	<p>Random Text</p><p>Random Text</p><p>Random Text</p>
</div>
 
<div id="middle">
	<p>Stuff in the middle</p>
</div>
 
<div id="right">
	<p>Random Text</p><p>Random Text</p><p>Random Text</p>
	<p>Random Text</p><p>Random Text</p><p>Random Text</p>
	<p>Random Text</p><p>Random Text</p><p>Random Text</p>
	<p>Random Text</p><p>Random Text</p><p>Random Text</p>
	<p>Random Text</p><p>Random Text</p><p>Random Text</p>
	<p>Random Text</p><p>Random Text</p><p>Random Text</p>
	<p>Random Text</p><p>Random Text</p><p>Random Text</p>
	<p>Random Text</p><p>Random Text</p><p>Random Text</p>
	<p>Random Text</p><p>Random Text</p><p>Random Text</p>
</div>
 
 
</body>
 
</html>