full-length divs...

Gazing into my crystal ball I observed dorayme
<doraymeRidThis (AT) optusnet (DOT) com.au> writing in news:doraymeRidThis-
1B6795.12114910082009 (AT) news (DOT) albasani.net:

In article <Xns9C62AEDBD3551arbpenyahoocom (AT) 188 (DOT) 40.43.213>,
Adrienne Boswell <arbpen (AT) yahoo (DOT) com> wrote:

What blew me away was that Mac REALLY didn't want me
to do what I wanted to do, it wanted to do what it THOUGHT I wanted to
do. No thank you to the Mac

And an example of this would be?

I can't think of one off the top of my head, but I'll be going over to that
client's house soon. I'll take notes and be back. Who knows, maybe I'll
like it more next time.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

dorayme wrote:

In article <zb2dncePAeCtZePXnZ2dnUVZ_u2dnZ2d (AT) giganews (DOT) com>,
maya <maya778899 (AT) yahoo (DOT) com> wrote:

hi,

how can I get sidebar here to extend to the bottom??
(i.e., to have same height as main div to the left?)
http://www.mayacove.com/layouts/layout.html
(markup and CSS here validate in W3C validator)


You would need to reorganise a few things and it would probably not be
worth trying to hang on to *this particular look* (but with the right
float *seeming to be* extended down). What you have here is highlighting
in every possible way the fact that divs only have as much height as
their content makes them. To give an impression of a column extending,
you make life easier if you dispense with borders.

In your particular case, where the content is clearly taller than the
sidebar, one simple way of giving the impression of the sidebar
extending is to give it the same colour as the container for it and
#main.

yes of course... I was just hoping for a more "portable" solution.. I
don't think I want to say to a designer, can you change your design b/c
we can't code for a full-length div??????

For example, to change your HTML only the very slightest bit, get the
footer outside #wrapper and look at:

body {margin:10px;}

#wrapper {
margin:auto;
max-width:1000px;
border:10px solid #eee;
background: #ffc;
padding:10px;
}

#wrapperInner {
max-width: 980px;
padding:10px;
background-color:#eee;
}

#main {
border-right:1px solid #999;
margin-right:240px;
padding:10px;
background:#eee;
}

#sidebar {
float:right;
width:200px;
padding:10px;
}

#footer {
clear:both;
background: #eee;
margin:0;
text-align:center;
}

Though you may not appreciate me saying this, I think it wholly not
worth it to have the complication of an inner and outer wrapper and the
fiddly bordery look.

again, yes, I totally agree.. I'm doing it to give myself more
flexibility.. I'm trying to come up with my own different "skeletons"...
so I don't struggle every time I create a layout for a particular design..

I found these very very neat examples just a few hours ago:
http://www.projectseven.com/tutorials/css/pvii_columns/col2fixed.htm

it uses some JS, but not much... (re accessibility, there are no errors
here, http://wave.webaim.org/.. I had thought ALL JS was a no-no for
accessibility.. well, topic for another thread in another group...

(in this example I also want to see if you can get rid of the scrolling
effect on the div bg-colors.. I assume you would..

what do you think of these examples??
what I don't understand about it is how this code affects the height
of the divs.. (and if not, what is it for??)

<!--[if IE 5]>
<style>
body {text-align: center;}
#wrapper {text-align: left;}
#sidebar {width: 182px;}
#maincontent {width: 570px;}
</style>
<![endif]-->
<!--[if lte IE 6]>
<style type="text/css">
#navbar a {height: 1em;}
</style>
<![endif]-->

(I removed it and, in the two browsers I have, IE6 and FF 3.0.5, it
looked and behaved exactly the same... also if I removed ONLY the part
for IE6, still it worked the same in IE6.. )

Frankly, I would not blame anyone for using tables if they really want
all singing all dancing columns, I am not a big fan of the desire for
them, as you might guess. For example, in above, I would drop the oute
wrapper altogether and make the background of the inner one pale yellow,
and go for a simpler look altogether...

yes, of course.. again, this is just for playing around, and you know,
hopefully develop my own formula for creating layouts.. making sure,
again, that I have as much flexibility as possible when doing the
visuals...

But I am just saying, I am not

telling you to do anything.

Nik Coughlin has good stuff on this if you really want general and
adaptable.

http://www.nrkn.com/3ColEqualPositioned/

I have bits and pieces on pages 11 and 12 of

http://netweaver.com.au/floatHouse/

this I found somewhat interesting.. I mean this pg,
http://netweaver.com.au/floatHouse/page11.php

in these examples the "columns" are paragraphs.. I can imagine all the
issues that raises (when you need a whole sidebar with lots of content I
don't think it can be just a paragraph.... but of course it can be
useful in some other situations....

thank you for your response...

dorayme wrote:

In article <Xns9C62AEDBD3551arbpenyahoocom (AT) 188 (DOT) 40.43.213>,
Adrienne Boswell <arbpen (AT) yahoo (DOT) com> wrote:

What blew me away was that Mac REALLY didn't want me
to do what I wanted to do, it wanted to do what it THOUGHT I wanted to
do. No thank you to the Mac

And an example of this would be?

Getting the cursor any where near the desktop sides and windows scurry
away like roaches after the lights go on... Now I am sure (hope) this is
a user preference setting...but it wasn't my laptop.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

In article <P9CdnULdiO5EzR3XnZ2dnUVZ_t-dnZ2d (AT) giganews (DOT) com>,
maya <maya778899 (AT) yahoo (DOT) com> wrote:

this I found somewhat interesting.. I mean this pg,
http://netweaver.com.au/floatHouse/page11.php

in these examples the "columns" are paragraphs.. I can imagine all the
issues that raises (when you need a whole sidebar with lots of content I
don't think it can be just a paragraph.... but of course it can be
useful in some other situations....

Don't let this put you off. If you really do know that one column is
going to always be longer than another (and we often simply do!), the
general technique is quite an attractive option.

The column was a P in that particular case - I have a bad tendency to
simplicity in favour of generality! <g> - but surely it could as easily
have been a DIV with Ps inside it, these Ps having default transparent
backgrounds showing the DIV's background colour.

For example, instead of what I had, I could as easily have had:

<div style="float:right; width: 200px; border-left: 1px solid #000;
background: #cfc; margin: 0; padding: .3em;">

<p>This column is floated right and has a green background. Crucially
for our purposes here, its content is taller than that of the
non-floated area to the left. The parent is a <a href="page8.php">Block
Formatting Context</a> and extends its height right down to cover it.</p>

<p>This column is floated right and has a green background. Crucially
for our purposes here, its content is taller than that of the
non-floated area to the left. The parent is a <a href="page8.php">Block
Formatting Context</a> and extends its height right down to cover it.</p>

</div>

--
dorayme

In article <h5ps90$8lq$1 (AT) news (DOT) eternal-september.org>,
"Jonathan N. Little" <lws4art (AT) centralva (DOT) net> wrote:

dorayme wrote:
In article <Xns9C62AEDBD3551arbpenyahoocom (AT) 188 (DOT) 40.43.213>,
Adrienne Boswell <arbpen (AT) yahoo (DOT) com> wrote:

What blew me away was that Mac REALLY didn't want me
to do what I wanted to do, it wanted to do what it THOUGHT I wanted to
do. No thank you to the Mac

And an example of this would be?



Getting the cursor any where near the desktop sides and windows scurry
away like roaches after the lights go on... Now I am sure (hope) this is
a user preference setting...but it wasn't my laptop.

Jonathan! We have been through this issue before when you last defamed
Macs! <g> Yes, it is a user option. I turn off all animation and fancy.
It is the plainest of plain. The only fancy I have on is to have the
dock (the minimize bar) appear when my mouse goes to the bottom of the
screen. Most people seem to hate this but it is cleaner and neater use
of screen space.

--
dorayme

dorayme wrote:

In article <P9CdnULdiO5EzR3XnZ2dnUVZ_t-dnZ2d (AT) giganews (DOT) com>,
maya <maya778899 (AT) yahoo (DOT) com> wrote:

this I found somewhat interesting.. I mean this pg,
http://netweaver.com.au/floatHouse/page11.php

in these examples the "columns" are paragraphs.. I can imagine all the
issues that raises (when you need a whole sidebar with lots of content I
don't think it can be just a paragraph.... but of course it can be
useful in some other situations....

Don't let this put you off. If you really do know that one column is
going to always be longer than another (and we often simply do!), the
general technique is quite an attractive option.

The column was a P in that particular case - I have a bad tendency to
simplicity in favour of generality! <g> - but surely it could as easily
have been a DIV with Ps inside it, these Ps having default transparent
backgrounds showing the DIV's background colour.

For example, instead of what I had, I could as easily have had:

div style="float:right; width: 200px; border-left: 1px solid #000;
background: #cfc; margin: 0; padding: .3em;"

oh brother, I would have liked to see an example w/divs.. I guess I can
adapt it myself.. because you know, I'm thinking of situations like
this, http://www.mayacove.com/dev/sitepoint/ch9/index_mine.html, you see
how the left sidebar is shorter than the rest?? and look how much
content it has..

thank you..

In article <E-6dnZHqpZT3IR3XnZ2dnUVZ_s-dnZ2d (AT) giganews (DOT) com>,
maya <maya778899 (AT) yahoo (DOT) com> wrote:

dorayme wrote:
In article <P9CdnULdiO5EzR3XnZ2dnUVZ_t-dnZ2d (AT) giganews (DOT) com>,
maya <maya778899 (AT) yahoo (DOT) com> wrote:

this I found somewhat interesting.. I mean this pg,
http://netweaver.com.au/floatHouse/page11.php

in these examples the "columns" are paragraphs.. I can imagine all the
issues that raises (when you need a whole sidebar with lots of content I
don't think it can be just a paragraph.... but of course it can be
useful in some other situations....

Don't let this put you off. If you really do know that one column is
going to always be longer than another (and we often simply do!), the
general technique is quite an attractive option.

The column was a P in that particular case - I have a bad tendency to
simplicity in favour of generality! <g> - but surely it could as easily
have been a DIV with Ps inside it, these Ps having default transparent
backgrounds showing the DIV's background colour.

For example, instead of what I had, I could as easily have had:

div style="float:right; width: 200px; border-left: 1px solid #000;
background: #cfc; margin: 0; padding: .3em;"

oh brother, I would have liked to see an example w/divs.. I guess I can
adapt it myself.. because you know, I'm thinking of situations like
this, http://www.mayacove.com/dev/sitepoint/ch9/index_mine.html, you see
how the left sidebar is shorter than the rest?? and look how much
content it has..

I don't quite see this with this URL on my browsers...? (This last URL
looks pretty competent to me, btw!) But left side has a lot of stuff and
goes right down to match the content more or less... Plus there is a
third col on the right.

Where you are not sure of the lengths, you have to steer clear of the
technique I was telling you about. Remember always that if a browser is
made less wide than you expect or the user controlled font sizes are
different, and depending on how you set widths for columns, the
*relative* lengths of columns can change before your eyes! This is
because a list usually goes down a page but content has paragraphs that
reduce in height the wider the browser!

On page 11 of that URL of mine, it is for where you really do know the
relative lengths of two columns. Often a site is really simple with lots
of content, intelligently limited in line length/width and a short handy
navigation on left, ideal for pouncing with the elementary HTML and CSS
on that page11.

--
dorayme

In article <P9CdnULdiO5EzR3XnZ2dnUVZ_t-dnZ2d (AT) giganews (DOT) com>,
maya <maya778899 (AT) yahoo (DOT) com> wrote:

what I don't understand about it is how this code affects the height
of the divs.. (and if not, what is it for??)

!--[if IE 5]
style
body {text-align: center;}
#wrapper {text-align: left;}
#sidebar {width: 182px;}
#maincontent {width: 570px;}
/style
![endif]--
!--[if lte IE 6]
style type="text/css"
#navbar a {height: 1em;}
/style
![endif]--

(I removed it and, in the two browsers I have, IE6 and FF 3.0.5, it
looked and behaved exactly the same... also if I removed ONLY the part
for IE6, still it worked the same in IE6.. )

Of course, these conditional comments are only seen by IE and so it is
not surprising FF would not be affected (browsers are supposed to be
inhuman and not read comments but the engineers at MS don't get out much
and their creations do funny things! <g>)

As for IE6 not being affected, I am not sure, it may depend on which
version, what size your browser and fonts are (the fault may only be
observable under certain conditions...). Also it may be the author did
not completely check and instead of just for less than 6, he thought to
play safe or had a sort of contempt/impatience for 6.

You can see I am not examining the matter closely. Forgive me.

--
dorayme

In article <doraymeRidThis-5A72D9.08492311082009 (AT) news (DOT) albasani.net>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <h5ps90$8lq$1 (AT) news (DOT) eternal-september.org>,
"Jonathan N. Little" <lws4art (AT) centralva (DOT) net> wrote:

dorayme wrote:
In article <Xns9C62AEDBD3551arbpenyahoocom (AT) 188 (DOT) 40.43.213>,
Adrienne Boswell <arbpen (AT) yahoo (DOT) com> wrote:

What blew me away was that Mac REALLY didn't want me
to do what I wanted to do, it wanted to do what it THOUGHT I wanted to
do. No thank you to the Mac

And an example of this would be?



Getting the cursor any where near the desktop sides and windows scurry
away like roaches after the lights go on... Now I am sure (hope) this is
a user preference setting...but it wasn't my laptop.

Jonathan! We have been through this issue before when you last defamed
Macs! <g> Yes, it is a user option. I turn off all animation and fancy.
It is the plainest of plain. The only fancy I have on is to have the
dock (the minimize bar) appear when my mouse goes to the bottom of the
screen. Most people seem to hate this but it is cleaner and neater use
of screen space.

Sounds like the user has Exposé hot spots set. If in 10.5.7,
System Preferences -> Exposé and Spaces -> Exposé, and tweak
accordingly. Exposé can actually be extremely useful, but I
prefer to have it activated from the keyboard or mouse buttons
in order to avoid exactly the situation AB describes.

In article <no.email-A92DB9.08573711082009 (AT) news1 (DOT) chem.utoronto.ca>,
David Stone <no.email (AT) domain (DOT) invalid> wrote:

In article <doraymeRidThis-5A72D9.08492311082009 (AT) news (DOT) albasani.net>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <h5ps90$8lq$1 (AT) news (DOT) eternal-september.org>,
"Jonathan N. Little" <lws4art (AT) centralva (DOT) net> wrote:


Getting the cursor any where near the desktop sides and windows scurry
away like roaches after the lights go on... Now I am sure (hope) this is
a user preference setting...but it wasn't my laptop.

Jonathan! We have been through this issue before when you last defamed
Macs! <g> Yes, it is a user option. ...

Sounds like the user has Exposé hot spots set.

Yes, it does.

If in 10.5.7,
System Preferences -> Exposé and Spaces -> Exposé, and tweak
accordingly. Exposé can actually be extremely useful, but I
prefer to have it activated from the keyboard or mouse buttons
in order to avoid exactly the situation AB describes.

As JL describes.

F11 - the most usefully programmed key ever in the history of Mac
computers. F11 (for non Mac users) is not a fighter jet but an equally
powerful attack device. Press it and magically everything but the
desktop goes away (except for a trace of shadow at the edges to indicate
the clutter is temporarily off stage) allowing you to get at icons and
stuff on the desktop. It is so bloody clever that it allows one to grab
hold of an icon and while doing that pressing F11 again to bring back
all the stuff and then dropping the icon onto or into where ever you
want in the file directory or onto a browser window or wherever.

We are talking one of the great wonders of the modern world here, so,
Adrienne and Jonathan, next time you are near a Mac, please, a little
quiet hushed reverence would be appropriate... <g>

--
dorayme