CSS Forum

**Joe3000** · 10-23-2008, 05:05 PM

I have a left column width a fixed width of 300px

I would like the right hand div/column to take up 100% of the left over space - so 100% - 300px

I would also like the height of box-big to be 100% if the div it is in (right).

Any ideas?

http://www.jfwebdesign.co.uk/help/

Code:

body {
    background-color: green;
}
.page {
    border: 1px solid red;
    width: 100%;
    height: 99%;
}
.left {
    border: 1px solid #7F7F7F;
    width: 300px;
    float: left;
}
.right {
    border: 1px solid #7F7F7F;
    width: 75%;
    height: 100%;
    float: right;
}
.box {
    background-color: #FFFFFF;
    margin-bottom: 5px;
    padding: 1px 3px 2px;
    color: #666666;
    border-top: 1px outset #FFFFFF;
    border-right: 1px outset #7F7F7F;
    border-bottom: 1px outset #7F7F7F;
    border-left: 1px outset #FFFFFF;
}
.box-big {
    background-color: #FFFFFF;
    margin-bottom: 5px;
    padding: 1px 3px 2px;
    color: #666666;
    border-top: 1px outset #FFFFFF;
    border-right: 1px outset #7F7F7F;
    border-bottom: 1px outset #7F7F7F;
    border-left: 1px outset #FFFFFF;
    height: 90%;
}

Thanks

**LadynRed** · 10-23-2008, 05:20 PM

http://www.webmaster-talk.com/css-fo...l-browser.html

For the right column to take up 100% of the available leftover space - don't define a width, it will fill the available space automatically.

**Joe3000** · 10-23-2008, 05:37 PM

Its working in IE but not horizontally in FF.

Thanks.

**LadynRed** · 10-24-2008, 01:24 PM

Well, the FIRST thing you need to do is put a proper DOCTYPE on your page - you're not going to get the results you want w/o one.

If you want it to work in more than one resolution, you're going to have to use percentages for your widths.

**Joe3000** · 10-24-2008, 01:32 PM

So I can't have one column to be 300px and the other be 100% or 70%?

**LadynRed** · 10-24-2008, 01:37 PM

Yes.. on my screen it had to be 300px and 73%

**Joe3000** · 10-24-2008, 01:41 PM

But if the screen resolution is different it won't fill the whole screen in the same way?

**LadynRed** · 10-24-2008, 01:51 PM

You might want to read this article: http://www.alistapart.com/articles/elastic/

And here's a few more references:
http://css-discuss.incutio.com/?page=TwoColumnLayouts
http://css-discuss.incutio.com/?page=ThreeColumnLayouts

**Gilligan** · 10-26-2008, 08:49 AM

You could set both the divs (left and right) in percentages, but have a min-width of 300px on the left div

Code:

.left {
    border: 1px solid #7F7F7F;
    width: 26%;
    float: left;
    min-width:300px;
}
.right {
    border: 1px solid #7F7F7F;
    height: 100%;
    float: right;
    width:73%;
}

This worked for me