3 div liquid design

Question

Question by a Learner

I making 3 div (col) design with left and right divs with fixed size , centered div as liquid (in %) as:

.left{
width:10px;
float:left;
}

.right{
width:10px;
float:left;
}
.center{
width:100%;
float:left;
}

HTML CODE:

<div class="left">  LEFT   </div>
<div class="center">CENTER</div>
<div class="right"> RIGHT     </div>

But it is showing the divs vertically (in separate lines) as:

left div
centered div (occupying whole page)
right div

How to dispaly them in horizontal manner as:

left div      centered div       Right div

THanks…

Answer 1

Its logically impossible.

If the center div is 100% width, there is no room for .left and .right

Its better you specify all the width in %. to make them coincide perfectly.

.left{
width:1%;
float:left;
}

.right{
width:1%;
float:left;
}
.center{
width:98%;
float:left;
}

Update: Since, the target is to get a fluid container in the .center. Here is the solution.