0

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>
2
Contributors
5
Replies
6
Views
5 Years
Discussion Span
Last Post by simplypixie
0

Remove the float: left; from your center div and set it's left and right margins to match the width of your left and right divs

0

Thanks for attention. but i did as you said and got nothing. can you show me in full html format pls.....?

0

Sorry, floated div's need to come first so in the html you need:

<div id="left">Content Here</div>
<div id="right">Content Here</div>
<div id="center">Content Here</div>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.