CODEWITHSUNDEEP
htmlcsslayoutliquid
mike
mike

Reputation: 749

floating divs with precentage widths

So I know there are tons of questions similar to this but I havent been able to find an answer to this specific question.

If I have a two column div layout, I want the div on the left to have a fixed width of 250px and a margin-left: 5%; (just the way I want it setupf for my design)...

the second div (the one on the right) I want to basically go to the end of the screen to the right. So the left div is 250px with a margin-left of 5% and I want the second div (the one on the right) to fill the entire rest of the browser.

On the second div I have tried a float left with a 100% width, but that makes the second div go to the bottom of the first, and fills up the screen. If I give the second div a fixed witdth, of coarse the float works but it doesnt fill up the browser window...and if you move the browser window smaller than the second div, it gets pushed down again to the bottom of the first div...

Is there anyway, with just css, to have one div with fixed width(and margin-left with a percentage), and the next div straight to the right of the first (like a float would normally work) with a percentage of 100% (or something like that) so that it fills the rest of the screen???

o ya I also need both divs to have height 100% if that makes a difference...Thanks!

Upvotes: 1

Views: 93

Answers (1)

sandeep
sandeep

Reputation: 92873

Write like this:

CSS

.left{
    float:left;
    background:red;
    width:250px;
    margin-left:5%;
}
.right{
    overflow:hidden;
    background:green;
}

HTML

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

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

Check this http://jsfiddle.net/ds8Ws/

Upvotes: 2

Related Questions