CODEWITHSUNDEEP
htmlcss
Steve Day
Steve Day

Reputation: 417

CSS 3 column layout issues

I'm having a few troubles with a 3 column layout I'm currently working on. I can create the layout just fine but there are some niggling issues I need to iron out.

HTML

<div id="container">
    <div class="col1">
    </div>
    <div class="col2">
    </div>
    <div class="col3">
    </div>
</div>

CSS

.col1
{
  float: left;
}
.col2
{
  float: left;
}
.col3
{
  float: right;
}
.col1,
.col3
{
  width: 100px;
}

My first issue is that columns 1 and 3 are fixed width and I need the middle column to expand to fill the gap between the two of them. I can't for the life of me figure out how to do this. I can achieve this using absolute positioning but that leads me nicely onto my next problem...

When the browser is resized I need the columns to wrap nicely underneath each other.

Any help or pointers would be much appreciated. Ideally I'd like to get this done with as little hacking and javascript as possible.

Here's a fiddle I've started to play around with: http://jsfiddle.net/BCJ6C/6/

Cheers!

Upvotes: 1

Views: 387

Answers (2)

Joonas
Joonas

Reputation: 7305

I think this is what youre looking for: http://matthewjamestaylor.com/blog/holy-grail-liquid-layout-no-quirks-mode

Edit: Changed the url. Accidentally posted the older version of this first

Upvotes: 0

Salman Arshad
Salman Arshad

Reputation: 272386

Here is your fiddle, updated

Just do not float the middle column. The bad part is that that you have to move it below column 1 and column 3 in the source order. Hope this is not a problem.

Upvotes: 1

Related Questions