Vince, Ok, I appreciate the comment about _best_ practice. I guess I have already discovered there are many ways to do this, and have had some success with putting it all in nested tables within tables. But I'd heard somewhere that that wasn't a good strategy for some reason, although I don't remember what the reason was. If nothing else, it seems to make the html code a lot longer than in your strategy.
What you've done is right on the mark. Well, with one exception being that I actually want the content (height) to behave the same way as the sidebar, so unlike the way you've set the content, I'll set it the same way as the sidebar. But I'm glad you did your example the way you did because it shows me at least one way each to handle both situations. So... thank you very much for the time you took to put that together. Much appreciated. I'm stuck on another project now and will get back to this next week. So I'll try this out then and let you know if I have any problems. David. On 01/03/2012, at 1:54 PM, Ghodmode wrote: > On Sun, Feb 26, 2012 at 3:58 PM, David Thorp > <[email protected]> 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 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/ ______________________________________________________________________ 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/
