CODEWITHSUNDEEP
htmlcss
willdanceforfun
willdanceforfun

Reputation: 11240

How to achieve this simple 3 column css layout

I have 3 columns. 1 is fixed width and floats on the left.

The other 2, I would like to take up 50% width of whatever width remains.

So if the screen is 1000px wide, and the 1st column is 300px, then that leaves 700px divided by 2 (350px) for the next 2 columns.

I've never come across a way to do this so that it scales.

Can it be done? If so how?

I thought something like this jsfiddle would do the trick, hoping that the right column would take up what was left, then nicely split in 2, but I was quite wrong.

Upvotes: 2

Views: 193

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206007

Solution using a bit of jQuery calculations

DEMO

$(document).ready(function(){
    var winW  = $(window).width();   // grab the window width
    var leftW = $('#left').width();  // grab the #left width
    $('#right').width( (winW - leftW)-24 ); // window width - #left width - your adjustments = result!
});

Upvotes: 2

mohana rao
mohana rao

Reputation: 429

You use either % or px, and if you use first div float left then after next divs automatically comes side by side as per width size until use clear:both; .

Upvotes: 0

Moak
Moak

Reputation: 12865

#left {
    float: left;
    width: 200px;
}
#right {width:auto; overflow:hidden}
#first {

    background: #ccc;
}

#second, #third {
    width: 48%;
    background: #333;
    float:left
}

#third {
    background: #000;
}

Upvotes: 2

Related Questions