Greetings all...
I'm relatively new to both CSS, and this list, but I've had some very positive
experiences on other lists for other programming tools, so I'm hoping this list
will be similar :)
I've been learning css from the w3schools website, which seems to be pretty
good as a crash course, but I'm having some difficulties getting positioning
and dimensions of objects to work the way I want. I'm not sure if this is
because I don't properly understand the rules and concepts, or I'm just getting
syntax or something simple like that wrong.
If anyone can help me I'd be grateful...
I have a number of <div> objects arranged in various positions:
1. A toolbar across the top that is the full width of the window (width:100%)
and 30px in height.
2. A sidebar down the left hand side, that starts under the toolbar (so the top
border of it is 30px down the page). It's 138 px wide.
3. Then a content area takes up the rest of the window.
I want each of these objects to take up the full height and width of the window
(wherever a height and width is not set), regardless of the size of the window,
without ever going over the edges of the window. I will use the overflow
property to generate scroll bars if the content within each of these objects is
larger than the size of the window allows.
So this means that:
1. the sidebar's height essentially needs to be (100%-30px).
2. the content area's height needs to be (100%-30px), and its width needs to be
(100%-138px).
If I set the height of these two objects to auto, then they only go as far down
the window as there is content in them, which if that's less than there is room
in the window, then they don't reach the bottom of the window.
If I set the heights to be 100% then they stretch beyond the height of the
window by exactly the 30 pixels of the toolbar, and they force the window
scroll bars to appear - no matter what size i make the window.
I understand of course that I can't do this:
object {
height:100%-30px
}
(well at least it's my understanding i can't do that, and I tried it and it
didn't work, but feel free to correct me if I'm wrong there somehow).
I'm also having some (different) challenges with the width of the content area,
but let's come back to that - one thing at a time.
Clearly I'm missing something... What's the best practice for getting the
heights the way I want them?
Thanks for any help!
David.
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
