Question

I have three divs stacked horizontally -> left, center and right.

Left and right are fixed width at 250px. I want the center div to have the max possible width. How do I do this?

Once this div is set to max possible, I will be setting the div inside it to margin:0 auto; to center align it.

Answer 1

You don’t need to do any calculations to achieve this. You can do it by some clever structuring of your HTML and a little bit of CSS!

Try this – View the Example in action, here: http://jsfiddle.net/zfg6m/1/

HTML

<div class="container">
    <div class="left-col">
        This is my left column!
    </div>
    <div class="right-col">
        This is my right column!
    </div>
    <div class="center-col">
        This is my center column
    </div>
</div>

CSS

.left-col {
  background-color: yellow;
  float: left;   
}

.right-col {
  background-color: orange;
  float: right;  
}

.center-col {
  background-color: blue;   
}

What’s happening with this code? Well you’re floating the two columns placed above the center column. Since the two floats are not cleared, they collapse and form space for your center column to fill 100% width of the area. This allows your center column to remain in between the two column, but stay dynamic in width.