Sent by Ghodmode on 1 March 2012 02:02
On Sun, Feb 26, 2012 at 3:58 PM, David Thorp
[EMAIL-REMOVED]> 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 [EMAIL-REMOVED]]
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/
