Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
100% Width & 100% Height of Whats Left
Old 10-23-2008, 05:05 PM 100% Width & 100% Height of Whats Left
Ultra Talker

Posts: 316
Trades: 0
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
Joe3000 is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 10-23-2008, 05:20 PM Re: 100% Width & 100% Height of Whats Left
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
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.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 10-23-2008, 05:37 PM Re: 100% Width & 100% Height of Whats Left
Ultra Talker

Posts: 316
Trades: 0
Its working in IE but not horizontally in FF.

Thanks.
Joe3000 is offline
Reply With Quote
View Public Profile
 
Old 10-24-2008, 01:24 PM Re: 100% Width & 100% Height of Whats Left
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
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.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 10-24-2008, 01:32 PM Re: 100% Width & 100% Height of Whats Left
Ultra Talker

Posts: 316
Trades: 0
So I can't have one column to be 300px and the other be 100% or 70%?
Joe3000 is offline
Reply With Quote
View Public Profile
 
Old 10-24-2008, 01:37 PM Re: 100% Width & 100% Height of Whats Left
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
Yes.. on my screen it had to be 300px and 73%
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 10-24-2008, 01:41 PM Re: 100% Width & 100% Height of Whats Left
Ultra Talker

Posts: 316
Trades: 0
But if the screen resolution is different it won't fill the whole screen in the same way?
Joe3000 is offline
Reply With Quote
View Public Profile
 
Old 10-24-2008, 01:51 PM Re: 100% Width & 100% Height of Whats Left
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
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
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 10-26-2008, 08:49 AM Re: 100% Width & 100% Height of Whats Left
Gilligan's Avatar
Website Designer

Posts: 1,670
Name: Stefan
Location: London, UK
Trades: 0
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
__________________

Please login or register to view this content. Registration is FREE
Gilligan is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to 100% Width & 100% Height of Whats Left
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 1.42495 seconds with 12 queries