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>

Recommended Answers

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

Jump to Post

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>
Jump to Post

All 5 Replies

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

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

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>

Thank you very much for help!

No problem

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.