Re: [css-d] Object height and width issues

[Ghodmode]

Sorry about the double posting.  I don't know how it happened.  I
thought I had clicked send already, and apparently I had, but the
window didn't go away like it should have.
__
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/

Re: [css-d] Object height and width issues

[Ghodmode]

On Mon, Mar 12, 2012 at 3:41 AM, David Laakso  wrote:
> On Sat, Mar 10, 2012 at 8:09 AM, David Thorp
>  wrote:
>  Just to clarify, what I mean is, as soon as I add
> "resize:horizontal;" to the div.sidebar {}, it breaks.
>
> --
> It is a little difficult to help because you seem a little confused
> about  CSS ["look and feel] versus scripting/programming .
> Nevertheless, a "quickstart" example. No floats, no absolute
> positioning, and no fixed positioning used. The page proper is a two
> column CSS Table. The left column -- that I assume will contain
> tabular data -- is set appropriately an html table. I have no idea why
> you would want one of those table columns to disappear but jquery has
> been  used to make it happen. I do not think that a vertical scroll
> bar to control the height of that table is needed, either. If
> anything, you might consider query show/hide 25 lines of it at a time.
>
> Open in a full window and drag to 480px mobile:
> 
> Cursory checked in IE/9. Safari, Opera, Firefox, and Anroid/2.2.2.
> Best,
> Lawrence of Arabia

Hi Larry :P
You missed a few details.

 - He wants a header along the top, outside of the columns.
 - He wants the columns to scroll independently and doesn't want the body to
   scroll at all.  All overflow happens within the columns.

I tried to accomplish this using CSS tables and failed because of the
independently scrolling part.

The table cell expands vertically when there's more content than fits whether
it's a real  or an element with display:table-cell.

I couldn't get it to work even with table-layout:fixed.

--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com


> --
> Chelsea Creek Studio
> http://ccstudi.com
__
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/

Re: [css-d] Object height and width issues

[David Thorp]

Sounds like I'm jumping in on this a little late, as Vince has chimed in for me 
(thanks), but yes, David, thanks for the suggestions and I can see some merits 
in CSS tables in certain circumstances (very interesting idea, really), but in 
this case, I couldn't see how it's going to work, and it looks like Vince has 
explained why, better than I could ;)

I appreciate the time you put into that demo/example.  I will be saving that 
for future reference.

David.




On 12/03/2012, at 1:43 PM, Ghodmode wrote:

> On Mon, Mar 12, 2012 at 3:41 AM, David Laakso  
> wrote:
>> On Sat, Mar 10, 2012 at 8:09 AM, David Thorp
>>  wrote:
>>  Just to clarify, what I mean is, as soon as I add
>> "resize:horizontal;" to the div.sidebar {}, it breaks.
>> 
>> --
>> It is a little difficult to help because you seem a little confused
>> about  CSS ["look and feel] versus scripting/programming .
>> Nevertheless, a "quickstart" example. No floats, no absolute
>> positioning, and no fixed positioning used. The page proper is a two
>> column CSS Table. The left column -- that I assume will contain
>> tabular data -- is set appropriately an html table. I have no idea why
>> you would want one of those table columns to disappear but jquery has
>> been  used to make it happen. I do not think that a vertical scroll
>> bar to control the height of that table is needed, either. If
>> anything, you might consider query show/hide 25 lines of it at a time.
>> 
>> Open in a full window and drag to 480px mobile:
>> 
>> Cursory checked in IE/9. Safari, Opera, Firefox, and Anroid/2.2.2.
>> Best,
>> Lawrence of Arabia
> 
> Hi Larry :P
> You missed a few details.
> 
> - He wants a header along the top, outside of the columns.
> - He wants the columns to scroll independently and doesn't want the body to
>   scroll at all.  All overflow happens within the columns.
> 
> I tried to accomplish this using CSS tables and failed because of the
> independently scrolling part.
> 
> The table cell expands vertically when there's more content than fits whether
> it's a real  or an element with display:table-cell.
> 
> I couldn't get it to work even with table-layout:fixed.
> 
> --
> Vince Aggrippino
> Ghodmode Development
> http://www.ghodmode.com
> 
> 
>> --
>> Chelsea Creek Studio
>> http://ccstudi.com
> __
> 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/

__
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/

Re: [css-d] Object height and width issues

[Ghodmode]

On Mon, Mar 12, 2012 at 3:41 AM, David Laakso  wrote:
> On Sat, Mar 10, 2012 at 8:09 AM, David Thorp
>  wrote:
>  Just to clarify, what I mean is, as soon as I add
> "resize:horizontal;" to the div.sidebar {}, it breaks.
>
> --
> It is a little difficult to help because you seem a little confused
> about  CSS ["look and feel] versus scripting/programming .
> Nevertheless, a "quickstart" example. No floats, no absolute
> positioning, and no fixed positioning used. The page proper is a two
> column CSS Table. The left column -- that I assume will contain
> tabular data -- is set appropriately an html table. I have no idea why
> you would want one of those table columns to disappear but jquery has
> been  used to make it happen. I do not think that a vertical scroll
> bar to control the height of that table is needed, either. If
> anything, you might consider query show/hide 25 lines of it at a time.
>
> Open in a full window and drag to 480px mobile:
> 
> Cursory checked in IE/9. Safari, Opera, Firefox, and Anroid/2.2.2.
> Best,
> Lawrence of Arabia

Hi Larry :P
You missed a few details.

 - He wants a header along the top, outside of the columns.
 - He wants the columns to scroll independently and doesn't want the body to
   scroll at all.  All overflow happens within the columns.

I tried to accomplish this using CSS tables and failed because of the
independently scrolling part.

The table cell expands vertically when there's more content than fits whether
it's a real  or an element with display:table-cell.

I couldn't get it to work even with table-layout:fixed.

--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com


> --
> Chelsea Creek Studio
> http://ccstudi.com
__
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/

Re: [css-d] Object height and width issues

[David Laakso]

On Sat, Mar 10, 2012 at 8:09 AM, David Thorp
 wrote:
 Just to clarify, what I mean is, as soon as I add
"resize:horizontal;" to the div.sidebar {}, it breaks.

--
It is a little difficult to help because you seem a little confused
about  CSS ["look and feel] versus scripting/programming .
Nevertheless, a "quickstart" example. No floats, no absolute
positioning, and no fixed positioning used. The page proper is a two
column CSS Table. The left column -- that I assume will contain
tabular data -- is set appropriately an html table. I have no idea why
you would want one of those table columns to disappear but jquery has
been  used to make it happen. I do not think that a vertical scroll
bar to control the height of that table is needed, either. If
anything, you might consider query show/hide 25 lines of it at a time.

Open in a full window and drag to 480px mobile:

Cursory checked in IE/9. Safari, Opera, Firefox, and Anroid/2.2.2.
Best,
Lawrence of Arabia

-- 
Chelsea Creek Studio
http://ccstudi.com
__
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/

Re: [css-d] Object height and width issues

[Ghodmode]

On Sat, Mar 10, 2012 at 9:05 PM, David Thorp
 wrote:
> Duh.  Brilliant.  Now that you present that, it's pretty obvious.  Haha.  
> Thanks.
>
> But now we have another challenge.  How do we make the sidebar horizontally 
> resizable, without disappearing behind the headerbar and content (or covering 
> them up)?  ie. it needs to move the left edge of those as we move the right 
> edge of the sidebar.

That's a job for Javascript.


> I spent a good couple of hours trying a few things this afternoon, and I've 
> tried a few more just now on your code... without success.   :(
>
> The problem seems to be because the sidebar is positioned "absolute"-ly,

> we have to set the content and headerbar to absolute positioning as well...?

Yep.  Well, not the headerbar, but the content and sidebar have to be positioned
absolutely because we don't have any way to determine the remaining vertical
space in the window after we subtract the height of the header.

If you wanted to give the header a percentage height (like 5%) instead of a
fixed height, you wouldn't need the absolute positioning.


> There seems to be no way to make the left edge of the content and headerbar 
>relate to the (movable) right edge of the sidebar...?
>
> What do you think?

Well, you would have to use Javascript to monitor the mouse position during
throttled click and drag mouse events on the edge of the sidebar and use that
information to resize the sidebar and the content area.  Way off-topic for this
list... and it makes my head hurt.

On the other hand, if you just want to toggle the sidebar open or closed when
clicking on a "grippy" -type thing, that would be much easier.

--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com


> Gotta say, it's frustrating that CSS seems to be so unintuitive in some ways, 
> but I'm grateful for the likes of you to help.  So thanks, yet again...
>
> David.
>
>
>
>
>
> On 10/03/2012, at 11:45 PM, Ghodmode wrote:
>
>> On Sat, Mar 10, 2012 at 12:55 AM, David Thorp
>>  wrote:
>>> Hi again Vince,
>>>
>>> Ok, well as recommended by you in the other thread, I've started over, and 
>>> in this case I'm now using your code below as a starting point.  As I noted 
>>> in a previous reply, it seems to be right on the mark... except I've run 
>>> across one little snag...
>>>
>>> See here:
>>>        http://davidthorp.name/published/browser-0d.html
>>> ...and the corresponding css here:
>>>        http://davidthorp.name/published/css/browser-0d.css
>>>
>>> I've done as you described here:
>>>
 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.
>>>
>>>
>>> But the problems now begin when I add "overflow-y: scroll;" to my sidebar.
>>>
>>> It does manage to scroll everything perfectly except for the fact that the 
>>> top 30 pixels of the scroll bar are obscured by the top bar... and so it 
>>> just looks a little weird.
>>>
>>> I've tried a few things, without success.  I'd very much like to know how 
>>> to get the scroll bar positioned correctly.
>>
>> I figured out how to do it using absolute positioning.  Rather than set a
>> vertical size on the elements, I just set their top and bottom positions.  
>> The
>> top position is the height of the toolbar and the bottom is 0.  It seems to 
>> work
>> fine in all of the relevant desktop browsers.
>>
>> http://www.ghodmode.com/experiments/sidebar/
>>
>> --
>> Vince Aggrippino
>> Ghodmode Development
>> http://www.ghodmode.com
>>
>>> Note: I've aded "opacity: 0.8" to my top bar (toolbar) so you can see the 
>>> scroll bar behind it.  In the finished version of this there will be no 
>>> transparency (ie. it'll be "opacity: 1;").  The problem isn't the fact that 
>>> it shows behind the toolbar.  The problem is just that it's not positioned 
>>> correctly.
>>>
>>> Thanks again for your help!
>>>
>>> David.
>>>
>>>
>>>
>>>
>>> On 01/03/2012, at 1:54 PM, Ghodmode wrote:
>>>
 On Sun, Feb 26, 2012 at 3:58 PM, David Thorp
  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  objects arranged in various positions:
>
> 1. A toolbar across t

Re: [css-d] Object height and width issues

[David Thorp]

Just to clarify, what I mean is, as soon as I add "resize:horizontal;" to the 
div.sidebar {}, it breaks.



On 11/03/2012, at 12:05 AM, David Thorp wrote:

> Duh.  Brilliant.  Now that you present that, it's pretty obvious.  Haha.  
> Thanks.
> 
> But now we have another challenge.  How do we make the sidebar horizontally 
> resizable, without disappearing behind the headerbar and content (or covering 
> them up)?  ie. it needs to move the left edge of those as we move the right 
> edge of the sidebar.
> 
> I spent a good couple of hours trying a few things this afternoon, and I've 
> tried a few more just now on your code... without success.   :(
> 
> The problem seems to be because the sidebar is positioned "absolute"-ly, we 
> have to set the content and headerbar to absolute positioning as well...?  
> There seems to be no way to make the left edge of the content and headerbar 
> relate to the (movable) right edge of the sidebar...?
> 
> What do you think?
> 
> Gotta say, it's frustrating that CSS seems to be so unintuitive in some ways, 
> but I'm grateful for the likes of you to help.  So thanks, yet again...
> 
> David.
> 
> 
> 
> 
> 
> On 10/03/2012, at 11:45 PM, Ghodmode wrote:
> 
>> On Sat, Mar 10, 2012 at 12:55 AM, David Thorp
>>  wrote:
>>> Hi again Vince,
>>> 
>>> Ok, well as recommended by you in the other thread, I've started over, and 
>>> in this case I'm now using your code below as a starting point.  As I noted 
>>> in a previous reply, it seems to be right on the mark... except I've run 
>>> across one little snag...
>>> 
>>> See here:
>>>   http://davidthorp.name/published/browser-0d.html
>>> ...and the corresponding css here:
>>>   http://davidthorp.name/published/css/browser-0d.css
>>> 
>>> I've done as you described here:
>>> 
 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.
>>> 
>>> 
>>> But the problems now begin when I add "overflow-y: scroll;" to my sidebar.
>>> 
>>> It does manage to scroll everything perfectly except for the fact that the 
>>> top 30 pixels of the scroll bar are obscured by the top bar... and so it 
>>> just looks a little weird.
>>> 
>>> I've tried a few things, without success.  I'd very much like to know how 
>>> to get the scroll bar positioned correctly.
>> 
>> I figured out how to do it using absolute positioning.  Rather than set a
>> vertical size on the elements, I just set their top and bottom positions.  
>> The
>> top position is the height of the toolbar and the bottom is 0.  It seems to 
>> work
>> fine in all of the relevant desktop browsers.
>> 
>> http://www.ghodmode.com/experiments/sidebar/
>> 
>> --
>> Vince Aggrippino
>> Ghodmode Development
>> http://www.ghodmode.com
>> 
>>> Note: I've aded "opacity: 0.8" to my top bar (toolbar) so you can see the 
>>> scroll bar behind it.  In the finished version of this there will be no 
>>> transparency (ie. it'll be "opacity: 1;").  The problem isn't the fact that 
>>> it shows behind the toolbar.  The problem is just that it's not positioned 
>>> correctly.
>>> 
>>> Thanks again for your help!
>>> 
>>> David.
>>> 
>>> 
>>> 
>>> 
>>> On 01/03/2012, at 1:54 PM, Ghodmode wrote:
>>> 
 On Sun, Feb 26, 2012 at 3:58 PM, David Thorp
  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  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 

Re: [css-d] Object height and width issues

[David Thorp]

Duh.  Brilliant.  Now that you present that, it's pretty obvious.  Haha.  
Thanks.

But now we have another challenge.  How do we make the sidebar horizontally 
resizable, without disappearing behind the headerbar and content (or covering 
them up)?  ie. it needs to move the left edge of those as we move the right 
edge of the sidebar.

I spent a good couple of hours trying a few things this afternoon, and I've 
tried a few more just now on your code... without success.   :(

The problem seems to be because the sidebar is positioned "absolute"-ly, we 
have to set the content and headerbar to absolute positioning as well...?  
There seems to be no way to make the left edge of the content and headerbar 
relate to the (movable) right edge of the sidebar...?

What do you think?

Gotta say, it's frustrating that CSS seems to be so unintuitive in some ways, 
but I'm grateful for the likes of you to help.  So thanks, yet again...

David.





On 10/03/2012, at 11:45 PM, Ghodmode wrote:

> On Sat, Mar 10, 2012 at 12:55 AM, David Thorp
>  wrote:
>> Hi again Vince,
>> 
>> Ok, well as recommended by you in the other thread, I've started over, and 
>> in this case I'm now using your code below as a starting point.  As I noted 
>> in a previous reply, it seems to be right on the mark... except I've run 
>> across one little snag...
>> 
>> See here:
>>http://davidthorp.name/published/browser-0d.html
>> ...and the corresponding css here:
>>http://davidthorp.name/published/css/browser-0d.css
>> 
>> I've done as you described here:
>> 
>>> 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.
>> 
>> 
>> But the problems now begin when I add "overflow-y: scroll;" to my sidebar.
>> 
>> It does manage to scroll everything perfectly except for the fact that the 
>> top 30 pixels of the scroll bar are obscured by the top bar... and so it 
>> just looks a little weird.
>> 
>> I've tried a few things, without success.  I'd very much like to know how to 
>> get the scroll bar positioned correctly.
> 
> I figured out how to do it using absolute positioning.  Rather than set a
> vertical size on the elements, I just set their top and bottom positions.  The
> top position is the height of the toolbar and the bottom is 0.  It seems to 
> work
> fine in all of the relevant desktop browsers.
> 
> http://www.ghodmode.com/experiments/sidebar/
> 
> --
> Vince Aggrippino
> Ghodmode Development
> http://www.ghodmode.com
> 
>> Note: I've aded "opacity: 0.8" to my top bar (toolbar) so you can see the 
>> scroll bar behind it.  In the finished version of this there will be no 
>> transparency (ie. it'll be "opacity: 1;").  The problem isn't the fact that 
>> it shows behind the toolbar.  The problem is just that it's not positioned 
>> correctly.
>> 
>> Thanks again for your help!
>> 
>> David.
>> 
>> 
>> 
>> 
>> On 01/03/2012, at 1:54 PM, Ghodmode wrote:
>> 
>>> On Sun, Feb 26, 2012 at 3:58 PM, David Thorp
>>>  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  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, wh

Re: [css-d] Object height and width issues

[Ghodmode]

On Sat, Mar 10, 2012 at 12:55 AM, David Thorp
 wrote:
> Hi again Vince,
>
> Ok, well as recommended by you in the other thread, I've started over, and in 
> this case I'm now using your code below as a starting point.  As I noted in a 
> previous reply, it seems to be right on the mark... except I've run across 
> one little snag...
>
> See here:
>        http://davidthorp.name/published/browser-0d.html
> ...and the corresponding css here:
>        http://davidthorp.name/published/css/browser-0d.css
>
> I've done as you described here:
>
>> 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.
>
>
> But the problems now begin when I add "overflow-y: scroll;" to my sidebar.
>
> It does manage to scroll everything perfectly except for the fact that the 
> top 30 pixels of the scroll bar are obscured by the top bar... and so it just 
> looks a little weird.
>
> I've tried a few things, without success.  I'd very much like to know how to 
> get the scroll bar positioned correctly.

I figured out how to do it using absolute positioning.  Rather than set a
vertical size on the elements, I just set their top and bottom positions.  The
top position is the height of the toolbar and the bottom is 0.  It seems to work
fine in all of the relevant desktop browsers.

http://www.ghodmode.com/experiments/sidebar/

--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com

> Note: I've aded "opacity: 0.8" to my top bar (toolbar) so you can see the 
> scroll bar behind it.  In the finished version of this there will be no 
> transparency (ie. it'll be "opacity: 1;").  The problem isn't the fact that 
> it shows behind the toolbar.  The problem is just that it's not positioned 
> correctly.
>
> Thanks again for your help!
>
> David.
>
>
>
>
> On 01/03/2012, at 1:54 PM, Ghodmode wrote:
>
>> On Sun, Feb 26, 2012 at 3:58 PM, David Thorp
>>  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  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 w

Re: [css-d] Object height and width issues

[David Thorp]

Hi again Vince,

Ok, well as recommended by you in the other thread, I've started over, and in 
this case I'm now using your code below as a starting point.  As I noted in a 
previous reply, it seems to be right on the mark... except I've run across one 
little snag...

See here:
http://davidthorp.name/published/browser-0d.html
...and the corresponding css here:
http://davidthorp.name/published/css/browser-0d.css

I've done as you described here:

> 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.


But the problems now begin when I add "overflow-y: scroll;" to my sidebar.

It does manage to scroll everything perfectly except for the fact that the top 
30 pixels of the scroll bar are obscured by the top bar... and so it just looks 
a little weird.

I've tried a few things, without success.  I'd very much like to know how to 
get the scroll bar positioned correctly.

Note: I've aded "opacity: 0.8" to my top bar (toolbar) so you can see the 
scroll bar behind it.  In the finished version of this there will be no 
transparency (ie. it'll be "opacity: 1;").  The problem isn't the fact that it 
shows behind the toolbar.  The problem is just that it's not positioned 
correctly.

Thanks again for your help!

David.




On 01/03/2012, at 1:54 PM, Ghodmode wrote:

> On Sun, Feb 26, 2012 at 3:58 PM, David Thorp
>  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  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:
>
>
>
>  
>  D. Thorp Sidebar
> 
>  
>
>
>  
>This is the top bar
>  
>  
>this is the left sidebar
>  
>  
>Lots of "Lorem Ipsum ..." goes here
>  
>
>
> 
> CSS:
>  /* Setting a height on the body and html elements is impo

Re: [css-d] Object height and width issues

[David Thorp]

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
>  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  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:
>
>
>
>  
>  D. Thorp Sidebar
> 
>  
>
>
>  
>This is the top bar
>  
>  
>this is the left sidebar
>  
>  
>Lots of "Lorem Ipsum ..." goes here
>  
>
>
> 
> 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 

Re: [css-d] Object height and width issues

[Ghodmode]

On Sun, Feb 26, 2012 at 3:58 PM, David Thorp
 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  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:



  
  D. Thorp Sidebar

  


  
This is the top bar
  
  
this is the left sidebar
  
  
Lots of "Lorem Ipsum ..." goes here
  



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

Re: [css-d] Object height and width issues

[David Thorp]

Hey David (H),

I've looked at each of your suggestions.  There's some very nice techniques 
there.  I'm not sure they solve my problem though.  

The layout ones are cool and a neat way of arranging things reliably and 
consistently, although I'll need to dig deeper to really understand what 
they're doing, but that might be a good system to adopt in general.

As for the other two solutions, I might be missing something but I'm not sure 
they solve my problem either yet... However I'm looking deeper into those 
currently too.  The sticky footer is onto something.

As noted in another reply, before you or anyone else tries to help any further, 
let me get a copy of this up on a server somewhere (I've been building it 
locally for the moment) and then post the question again where you can all see 
what's going on.  That'll be a couple of days probably.

Thanks again!
David (T).





On 27/02/2012, at 9:43 AM, David Hucklesby wrote:

> On 2/25/12 11:58 PM, David Thorp wrote:
> [...]
>> 
>> I have a number of  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.
>> 
> [...]
> 
> For the layout, the second template on this page may work for you. The
> sidebar on that example is 30%, but the layout will also work with your
> fixed width. :)
> 
>  
> 
> For the height problem, look for "sticky footer" solutions. Here is a
> simple one:
> 
>  
> 
> If you need the columns to have a colored background top to bottom, my
> favorite solution is the "fluid faux columns" from this page:
> 
>  
> 
> Like most CSS problems, there are many solutions, but some fit a
> particular page better than others. I believe it's always best to start
> from a page with representative content, marked up with Plain Old
> Semantic HTML. For me, that makes choosing the solution much easier. YMMV.
> 
> HTH.
> -- 
> Cordially,
> 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/

__
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/

Re: [css-d] Object height and width issues

[David Thorp]

David (L), Thanks for the welcome! :)

And for the tip... although alas that doesn't really solve my problem I'm 
afraid.  

But before you or anyone else tries to help any further, let me get a copy of 
this up on a server somewhere (I've been building it locally for the moment) 
and then post the question again where you can all see what's going on.  
That'll be a couple of days probably.

Thanks again!
David (T).



On 27/02/2012, at 3:49 PM, David Laakso wrote:

> On Sun, Feb 26, 2012 at 2:58 AM, David Thorp
>  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 :)
> 
> 
> 
> Welcome to the list, David.
> 
> Start here:
> 
> End there.
> 
> Best,
> ~d
> 
> PS "Sufficient unto the day is the evil thereof"
> __
> 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/

__
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/

Re: [css-d] Object height and width issues

[David Laakso]

On Sun, Feb 26, 2012 at 2:58 AM, David Thorp
 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 :)



Welcome to the list, David.

Start here:

End there.

Best,
~d

PS "Sufficient unto the day is the evil thereof"
__
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/

Re: [css-d] Object height and width issues

[David Hucklesby]

On 2/25/12 11:58 PM, David Thorp wrote:
[...]


I have a number of  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.


[...]

For the layout, the second template on this page may work for you. The
sidebar on that example is 30%, but the layout will also work with your
fixed width. :)

  

For the height problem, look for "sticky footer" solutions. Here is a
simple one:

  

If you need the columns to have a colored background top to bottom, my
favorite solution is the "fluid faux columns" from this page:

  

Like most CSS problems, there are many solutions, but some fit a
particular page better than others. I believe it's always best to start
from a page with representative content, marked up with Plain Old
Semantic HTML. For me, that makes choosing the solution much easier. YMMV.

HTH.
--
Cordially,
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/

Re: [css-d] Object height and width issues

[Philip TAYLOR]

John D wrote:



You mean something like this:




This forces a vertical scroll bar in Seamonkey 2.7.2
at 1152 x 862.

Philip Taylor
__
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/

Re: [css-d] Object height and width issues

[John D]

You mean something like this:



If not then please post a link to your test page.

Good luck.




> 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  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?
> 

  
__
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/