Hi all,
I am newbie in CSS and created 3 column layout. But what i want is that left and right columns to be fixed but only center fluid.
Below is my code. but there are still problems with it.
Can anyone one help me or it is only possible with javascript?
Thankyou very much for attention beforehands!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html>
<head>
<title></title>
<style>
body {
margin:0px;
}
#main {
width:99%;
height:600px;
background-color:#c0c0c0;
min-width:1000px;
margin-left:5px;
margin-right:3px;
}
#header {
width:100%;
height:150px;
background-color:red;
min-width:1024px;
}
#wrapper {
width:100%;
height:440px;
min-width:1024px;
background-color:blue;
margin-top:5px;
}
#left {
width:200px;
height:440px;
background-color:yellow;
float:left;
margin-right:5px;
}
#right {
height:440px;
background-color:yellow;
float:right;
width:200px;
}
#center {
height:440px;
background-color:green;
float:left;
}
</style>
<!--
<script>
function hundurluk(){
//var DivHeight = document.getElementById('center').clientHeight;
var center1=document.getElementById('main').clientWidth-document.getElementById('left').clientWidth-document.getElementById('right').clientWidth-8
//document.getElementById('left').clientWidth=DivHeight-5+'px';
//document.getElementById('right').style.height=DivHeight-5+'px';
document.getElementById("center").style.width=center1+'px';
setTimeout(function(){hundurluk()}, 50);
}
onload = function(){
hundurluk();
}
</script>
-->
</head>
<body>
<div id="main">
<div id="header">
</div>
<div id="wrapper">
<div id="left">
</div>
<div id="center">
dfg dgf fd gfdg dfg dfgf dgdf gfdg d gf yhyfhfhfgh fgh fgh hffgh fhf fghfh fhfhfg hfjfj
gjf fjf j fjf jf jf hfg hfgh fghfg hfghf ghf hfh fh hfhfh fhh gjgj hjgj gjgjgj gjg jgj jgjgjgh
dfgf dgdf gfdg d gf yhyfhfhfgh fgh fgh hffgh fhf fghfh fhfhfg hfjfj
gjf fjf j fjf jf jf hfg hfgh fghfg hfghf ghf hfh fh hfhfh fhh gjgj hjgj gjgjgj gjg jgj jgjgjgh dfgf dgdf gfdg d gf yhyfhfhfgh fgh fgh hffgh fhf fghfh fhfhfg hfjfj
gjf fjf j fjf jf jf hfg hfgh fghfg hfghf ghf hfh fh hfhfh fhh gjgj hjgj gjgjgj gjg jgj jgjgjgh dfgf dgdf gfdg d gf yhyfhfhfgh fgh fgh hffgh fhf fghfh fhfhfg hfjfj
gjf fjf j fjf jf jf hfg hfgh fghfg hfghf ghf hfh fh hfhfh fhh gjgj hjgj gjgjgj gjg jgj jgjgjgh
</div>
<div id="right">
</div>
</div>
</div>
</body>
</html>
