On Sun, Feb 26, 2012 at 3:58 PM, David Thorp
<mailingli...@allaboutabundance.com.au> wrote:
> 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?
It's difficult to define the _best_ practice. You'll quickly find out that
there are many ways to do anything you might want to do.
You don't necessarily have to make the left sidebar 100%-30px. If you set the
top bar to position:absolute, other elements will go behind it. So, you can
make the left sidebar 100% height. 30px of it will be obscured at the top, but
you can fix that with a margin on its first child.
The following is demonstrated at http://www.ghodmode.com/testing/dthorp
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D. Thorp Sidebar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="top_bar">
<p>This is the top bar</p>
</div>
<div class="left_bar">
<p>this is the left sidebar</p>
</div>
<div class="content">
<p>Lots of "Lorem Ipsum ..." goes here</p>
</div>
</body>
</html>
CSS:
/* Setting a height on the body and html elements is important. Without that,
* vertical heights on other elements don't work.
*/
body, html {
height: 100%;
margin: 0;
}
body {
background-color: #bbf;
}
/* position:absolute on the top_bar allows other elements to go behind it.
*/
div.top_bar {
width: 100%;
height: 30px;
position: absolute;
background-color: #bfb;
}
/* Since the top_bar has position:absolute, the left_bar can be height:100%
* without worrying about clearing the top bar.
*/
div.left_bar {
background-color: #fbb;
height: 100%;
float: left;
}
/* Since the left_bar now goes behind the top_bar, its contents could
* potentially be obscured by the top bar. Setting a margin-top on the first
* child of the left_bar makes sure this doesn't happen.
* This couldn't be done using padding on the left_bar because that would make
* the left_bar taller than 100% (by 30px) and force a scroll bar
even if there
* wasn't any real content taller than the window.
*/
div.left_bar *:first-child {
margin-top: 30px;
}
/* The content area will go behind the top_bar, too. So, adding
30px padding to
* the top makes sure content isn't obscured.
* Here, padding is effective because we haven't set the height on the content
* area.
*/
div.content {
padding: 30px 1em 0;
background-color: white;
overflow: auto;
}
/* Setting the first level of children to float:left allows them to be next to
* the side bar. Without this, block elements inside the content
area would be
* 100% wide and make the content area too wide to be next to the
left_bar. It
* would be forced below the left_bar.
*/
div.content > * {
float: left;
}
--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com
> Thanks for any help!
>
> David.
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
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/
