CODEWITHSUNDEEP
htmlcss
Greenhoe
Greenhoe

Reputation: 1051

How to make 3 column width fluid with different sizes in CSS

I have a box that has 3 divs in it. I made a picture below, the two outside divs I have set widths that I need them to be but the middle div I want to be fluid and fill to what ever the remaining width is.

The code for this will be used on different pages that have different width's so I would like the middle to always adjust based on to fill the remaining width.

enter image description here

Upvotes: 2

Views: 4804

Answers (3)

jmore009
jmore009

Reputation: 12923

The way to do this with out breaking a line is to use display: table-cell. To assure the spacing will work properly you should wrap the divs in a container and set a max-width on the container. Then find the remaining width of the middle box: 65+185 = 250. 800 (my max-width example) - 250 = 550. 550/800 = 68.75%. Set that percentage as the middle box and it will be completely fluid. Box 3 won't break to the next line no matter how small the browser gets.

FIDDLE

CSS

.container{
  max-width: 800px
}

.box1{
  width: 65px;
  height: 50px;
  background: black;
  display: table-cell;
  vertical-align: top;

}

.box2{
  width: 68.75%;
  height: 50px;
  background: green;
  display: table-cell;
  vertical-align: top;
}

.box3{
  width: 185px;
  height: 50px;
  background: yellow;
  display: table-cell;
  vertical-align: top;
}

HTML

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

Upvotes: 2

Milad Abooali
Milad Abooali

Reputation: 728

Use this css:

    #left {
        float:left;
        width:65px;
        background-color:#ff0000;
    }
    #center {
        float:left;
        width:100%;
        max-width: initial; 
        background-color:#00AA00;
    }
    #right {
        float:right;
        width: 185px;
        background-color:#00FF00;
    }

And this Html:

    <div  id="center">
        <div id="left">
            left
        </div>
        center
        <div id="right">
                right
        </div>
    </div>

Test Online: http://jsfiddle.net/9PFPm/

Upvotes: 0

Danilo
Danilo

Reputation: 2036

Possible solution:

This is the css

main { width:100% }
left { 
     display:inline-block; 
     width: 65px; 
     height: 291px; 
     background-color:#0000ff; 
}
middle {  
     position:absolute;
     display:inline-block; 
     background-color:#ffff00; 
     height: 291px; 
     margin-right:185px
}
right { 
     float:right; 
     height: 291px; 
     background-color: #ff0000; 
     width: 185px;
}

And the html:

<div class="main">
    <div class="left"></div>

    <div class="middle">
        blablabla
    </div>

    <div class="right"></div>
</div>

You can find a working sample here: http://jsfiddle.net/mLJLr/1/

Upvotes: 0

Related Questions