Member Avatar for azegurb

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
  • 253 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by simplypixie

Dani AI

Generated

As pointed out, this layout does not require JavaScript — remove the float from the center column and reserve space for the sidebars with margins (and place the floated sidebars before the center in the markup). The original attempt floated the center and tried to compute widths in JS; that approach is fragile (min-width, padding, borders and the box model will cause off-by values and continual recalculation).

A clean, modern solution is flexbox (works in all current browsers and is far simpler):

<!-- HTML -->
<div class="page">
  <header class="hdr"></header>
  <div class="cols">
    <aside class="left">Left</aside>
    <main class="center">Center (fluid)</main>
    <aside class="right">Right</aside>
  </div>
</div>

<!-- CSS -->
* { box-sizing: border-box; }
.page { min-width: 1000px; margin: 0; }
.hdr { height: 150px; background: red; }
.cols { display: flex; height: 440px; }
.left, .right { flex: 0 0 200px; background: yellow; }
.center { flex: 1 1 auto; background: green; overflow: auto; }

For older-browser compatibility the classic float+margin method still works (remember the floated sidebars must come before the center in the DOM):

<!-- put these before the center element -->
<aside class="left">Left</aside>
<aside class="right">Right</aside>
<main class="center">Center</main>

.wrapper { min-width:1000px; overflow: hidden; }
.left { float:left; width:200px; }
.right{ float:right; width:200px; }
.center{ margin:0 200px; overflow:auto; }

Troubleshooting notes (relevant to ): ensure there are no unclosed tags, reset body margins, use box-sizing: border-box so padding doesn't grow widths, and avoid polling JS loops. If equal-height visuals are required, flexbox provides that automatically; with floats use a background on the container or a faux-column technique. These patterns remove the need for manual width calculations and give a stable fixed-sidebar + fluid-center layout.

Recommended Answers

All 5 Replies

Member Avatar for simplypixie

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

Member Avatar for azegurb

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

Member Avatar for simplypixie

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>
Member Avatar for azegurb

Thank you very much for help!

Member Avatar for simplypixie

No problem

Be a part of the DaniWeb community

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