div-based layouts..

maya wrote:

Andy Dingley wrote:
On 16 Feb, 18:31, maya <maya778... (AT) yahoo (DOT) com> wrote:

question: float:left and float:right works, I suppose, when you have
just TWO divs that need to appear side-by-side.. BUT: what about when
you have much more, say, SIX little paragraphs that need to appear side
by side???

Float them all leftwards - they'll work it out for themselves.

Floating is usually pretty easy, it's clearing correctly afterwards
that's more awkward. Read brainjar. Accept that you probably will have
to add a HTML element to set the clearing behaviour on - if there
aren't enough HTML elements there you can't invent a few more with
CSS. You maybe can with
:after { content ... } but that's contrived and not really the best
approach. Just accept that adding a simple HTML element (no text
content needed) _is_ acceptable.


pls compare how this looks in IE and FF:
http://www.francesdelrio.com/resume/test2.html

it seems FF has a problem with 'float' prop...

No it is IE that has a problem with floats. Containing blocks in normal
flow are not supposed to expand to contain floated children. There are
options to change this, one is the "clear" property....

GIYF


http://www.google.com/search?hl=en&q=how+to+contain+floats&btnG=Google+S earch
how to contain floats - Google Search

--
Take care,

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

maya wrote:

Andy Dingley wrote:
On 16 Feb, 18:31, maya <maya778... (AT) yahoo (DOT) com> wrote:

question: float:left and float:right works, I suppose, when you
have just TWO divs that need to appear side-by-side.. BUT: what
about when you have much more, say, SIX little paragraphs that need
to appear side by side???

Float them all leftwards - they'll work it out for themselves.

Floating is usually pretty easy, it's clearing correctly afterwards
that's more awkward. Read brainjar. Accept that you probably will
have to add a HTML element to set the clearing behaviour on - if
there aren't enough HTML elements there you can't invent a few more
with CSS. You maybe can with
:after { content ... } but that's contrived and not really the best
approach. Just accept that adding a simple HTML element (no text
content needed) _is_ acceptable.

oh man, this is SO MUCH HARDER than with tables... what I hate the
most about this is without tables you can't do layout GRID...

One of the problems with non-table layouts is trying to forget what was done
before with tables. You need to un-learn a few thing. For example, you
should question why you are still thinking in terms of a "layout grid" at
all.

You should be thinking in terms of "blocks of content" and simply let the
browser handle their layout. You *may* constrain the blocks in some way
(width for example) but you should not be thinking of how they are layed out
in relation to each other. Let the browser work that out, it will do a
better job. It knows all about the client side environment (canvas size,
font size etc). You don't.

I would like to know the best way to create a div-based layout like
this: http://www.francesdelrio.com/resume/test4.html
with only divs...
(this is done w/tables, just to illustrate what I want..)

Without tables this would be somewhat tricky, but not impossible. The
trickyness is required because the actual design *assumes* something about
the layout, that is that the layout is a grid. Relax that assumption and it
becomes trivial.

I have tried examples mentioned in this thread, like for example
http://glish.com/css/7.asp
but as soon as I start modifying the code I get into trouble...

That is a simple three column layout. Easy to do. There is no pre-assumed
layout, just that certain blocks of content are constrained in width
horizontally across the canvas, and a couple of them are positoned, one left
and one right. The browser does the layout. There is certainly no concept of
a grid in there.

Do not fall into the trap of thinking that the top block (the header if you
like) is part of the bottom three columns, or even associated with them at
all. It is not. It just happens to come before them in the HTML and so is
layed out by the browser first. That header block wouldn't care if there
were twenty eight columns below it. Similarly the columns have no reason to
care, or even know, that there is a block preceeding them. In fact you could
remove everything except, say, that middle column and the page (or at least
the middle column) would look exactly the same, just a bit emptier.

Of course in a table layout that first block *would* be part of the grid,
probably with colspan=3. Not so with a non-table layout. It's independent.

I have ordered a book to help me out
(http://www.amazon.com/HTML-Utopia-Designing-Without-Tables/dp/0975240277/ref=sr_1_1?ie=UTF8&s=books&qid=1235094397&sr=1-1)
I hope it'll help me..

Probably not.

I have heard people say that one reason why so many people prefer
table-less layouts is that divs load faster than tables, but: content
buried four divs deep really loads faster a table? I find that hard
to believe..

If you need to bury content four levels deep in divs then you have not
grocked the real way to lay stuff out without tables.

Apply the KISS principle before you type the first character of content and
introduce a div only if there is a specific reason for doing so and there is
no other existing element (a <p> for example) to hand.

That middle column in the above glish example, it's a div so the entire
block of paragraphs, headings and and so forth it contains can be given a
left and right margin, as a unit, the result being to eventually keep the
content away from the side columns. Nothing more. No positioning. No direct
thought of other blocks on the page. Just a left and right margin to leave
some empty space laying about.

You specify the minimum required to hint to the browser how you might like
your blocks to appear. Not how they will appear in relation to each other,
just how each individual block will appear. The browser lays out each block
and you end up with a composite page that looks how you want it to, well
usually anyway.

In article
<42fa3087-4dd6-4f84-b285-79fe9f3df1e9 (AT) f33g2000vbf (DOT) googlegroups.com>,
Andy Dingley <dingbat (AT) codesmiths (DOT) com> wrote:

On 18 Feb, 18:36, Ben C <spams... (AT) spam (DOT) eggs> wrote:
On 2009-02-18, Andy Dingley <ding... (AT) codesmiths (DOT) com> wrote:

On 18 Feb, 14:59, Gus Richter <gusrich... (AT) netscape (DOT) net> wrote:

The problem is that you have an almost completely erroneous idea of
"presentation", "content" and "semantics" as applied to HTML markup.

Go on then, what are the correct ideas of those things?

....

Just as Presentation should be kept out of html, it follows that Content
should be kept out of css, so it would seem to be contradictory to have
Generated Content and List Numbering, but I digress. ;-)

That's a failure to understand _why_ CSS supports generated content,
even though it's working hard to avoid turning into DSSSL. Yet again,
you can't grok this stuff until you've read Haakon Lie's PhD thesis.

A simple summary of the reasons would have been welcomed by not a few
interested readers of this thread.

To my more anthropological view of these matters, I would have thought
Gus was on understandable ground and that if content is needing to be
delivered by CSS, that tells of a failure in the capacity of HTML.

I for one have a simple idea of *author* CSS and that is it can be
*turned off* and that what is left should be all *essential content* for
the user to get by on. (Put aside that I think content is really just a
human recognizable basic presentation.)

If the so-called "content" generated in the CSS is not important, if it
can be turned off without *ruining* reader ability to get by, then maybe
it is *not* content in the required or *same sense* as content in HTML?
Maybe it is a bit like a background colour that an author puts in not
for aesthetic reasons but *for* usability.

Maybe, for example, OL numbering is a mere enhancement to what should be
clear from the context? After all, the numbers do not whisper to the
reader that they signify ordered list rather than an unordered one with
labels for handy reference.

Maybe, if there is a serious loss of reader usability after all, the
author has gone *wrong* in putting it in the CSS in the first place?
Maybe such authors are being less straightforward than they should be.
Maybe the gun available to authors of generated content should be
disabled because of the dangers of misuse. Or maybe authors should be
careful how they use it and think of it as more like non-aesthetic uses
of CSS (like some highlight colours, indentation, etc)

Maybe, in other words, it is no big deal that CSS can generate so called
content if we take a certain analysis along with us about what this
involves and suppose it is not "really" content in any sense that a
highlighting colour is not really content.

Along comes XML

That word is my exit excuse...

Sorry, but I had to sit through this twaddle all through 2000 and wear
a suit whilst doing it. If you're going to recycle buzzwords

Gee Andy, you have a cheek! You don't think twice about la de daing it
from on high with all sorts of buzz words and high falutin' sentences!
we were just two honest lowly punters, mine workers, we have been goddam
shovellin' coal all day, give us a break. Gus and I having a chat over a
beer in a public place like this, chewing the fat and not causing anyone
the least harm... <g>

--
dorayme

Jonathan N. Little wrote:

maya wrote:
Andy Dingley wrote:
On 16 Feb, 18:31, maya <maya778... (AT) yahoo (DOT) com> wrote:

question: float:left and float:right works, I suppose, when you have
just TWO divs that need to appear side-by-side.. BUT: what about when
you have much more, say, SIX little paragraphs that need to appear side
by side???

Float them all leftwards - they'll work it out for themselves.

Floating is usually pretty easy, it's clearing correctly afterwards
that's more awkward. Read brainjar. Accept that you probably will have
to add a HTML element to set the clearing behaviour on - if there
aren't enough HTML elements there you can't invent a few more with
CSS. You maybe can with
:after { content ... } but that's contrived and not really the best
approach. Just accept that adding a simple HTML element (no text
content needed) _is_ acceptable.


pls compare how this looks in IE and FF:
http://www.francesdelrio.com/resume/test2.html

it seems FF has a problem with 'float' prop...

No it is IE that has a problem with floats. Containing blocks in normal
flow are not supposed to expand to contain floated children. There are
options to change this, one is the "clear" property....

GIYF


http://www.google.com/search?hl=en&q=how+to+contain+floats&btnG=Google+S earch

how to contain floats - Google Search

hmmm.. I tried all values for 'clear' property (none, left, right, both)
to no avail.. again, pls look in FF.. (& compare to how it looks in IE..)
http://www.francesdelrio.com/resume/test2a.html
whichever values I put for 'clear' value I got the exact same result..
would appreciate some suggestions..

it does look like placing content side-by-side is the most challenging
aspect of div-based layouts (esp when you need content BENEATH the div
containing the floats..)

thank you..

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

hmmm.. I tried all values for 'clear' property (none, left, right, both)
to no avail.. again, pls look in FF.. (& compare to how it looks in IE..)
http://www.francesdelrio.com/resume/test2a.html
whichever values I put for 'clear' value I got the exact same result..
would appreciate some suggestions..

Perhaps you will find some tips at:

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

--
dorayme

maya wrote:

hmmm.. I tried all values for 'clear' property (none, left, right, both)
to no avail.. again, pls look in FF.. (& compare to how it looks in IE..)
http://www.francesdelrio.com/resume/test2a.html
whichever values I put for 'clear' value I got the exact same result..
would appreciate some suggestions..

it does look like placing content side-by-side is the most challenging
aspect of div-based layouts (esp when you need content BENEATH the div
containing the floats..)

Let's name the divs for clarity like so and take things one at a time:

<div id="w1">
<div id="c1"></div>
<div id="c2"></div>
</div>
<div id="w2">
<div id="c3"></div>
</div>

Correct the opening and closing paragraph tags for dic#c1 and div#c2.

Delete padding:20px; for div#w1 for it expands the width of div#w1
which is not what we want.
Delete the three instances for text-align in div#w1, div#c1 and div#c2
since they are not needed.
Delete clear:both; in div#w1 since it does nothing.
Delete padding-right: 30px; in div#c1 since it does nothing.
Delete float: left; in div#c2 since we don't want to float it.

Look at it at this stage and see that basically you have what you want.
Div#c1 is floated left and div#c2 _flows_ to the right of div#c1.

Add padding-left:10px; to div#c1
Add padding-right:10px; to div#c2

You should see that the text in div#c2 wraps around the floated div#c1
but if not, then add more text to div#c2 and you should see it. If we
don't want this, we need to add a left margin value to div#c2 from the
left edge of div#w1 to where we want div#c2 to have its left edge. Since
you use percentage for div#c1 width, we have to use the same for the
left margin for div#c2 like so:

Add margin-left:55%; to div#c2

Note how the extended portion of div#c2 beyond div#c1 no longer wraps
around div#c1 and that we have at the same time created a gutter
separating the two divs.

Now, as in your previous test examples, it may happen that the float
div#c1 has greater visual height than div#c2 and if you want to see the
result of div#c1 bleeding out of the div#w1 then remove some text from
div#c2. This bleeding or extending beyond the container by the float is
because the float is out of the normal flow and presents no content
(i.e. height) to the container. If there were a third element inside
div#w1 to go below div#c1 and div#c2 then we would add clear:left; to
this third element (which may be another div) in order to get clearance
and thereby position this element below the float, the container will
see this and extend its borders to encompass all. Here we don't have a
third element, but we can add an empty element and I will choose a div
(some prefer other elements) like so:

Add this html markup:
<div style="clear:left;"></div>
after div#c2 closing tag and before div#w1 closing tag.

There is no reason to place div#c3 into a container div#w2.

I hope that this step-by-step with reasoning will help you to
understand. Here is what you should have:


<div id="w1" style="border: 1px solid rgb(153, 0, 0); margin: 0pt auto
50px; width: 600px;">
<div id="c1" style="float: left; width: 50%; padding-left:10px;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="c2" style="padding-right:10px; margin-left:55%;">
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil
imperdiet doming id quod mazim placerat facer possim assum. Typi non
habent claritatem insitam; est usus legentis in iis qui facit eorum
claritatem. Investigationes demonstraverunt lectores legere me lius quod
ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur
mutationem consuetudium lectorum. Mirum est notare quam littera gothica,
quam nunc putamus parum claram, anteposuerit litterarum formas
humanitatis per seacula quarta decima et quinta decima. Eodem modo typi,
qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>
<div style="clear:left;"></div>
</div>

<div id="w2" style="border: 1px solid rgb(153, 0, 0); margin: 0pt auto
50px; padding: 20px; text-align: center; width: 600px;">
<div id="c3" style="text-align: left;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber
tempor cum soluta nobis eleifend option congue nihil imperdiet doming id
quod mazim placerat facer possim assum. Typi non habent claritatem
insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt
saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem
consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc
putamus parum claram, anteposuerit litterarum formas humanitatis per
seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis
videntur parum clari, fiant sollemnes in futurum.</p>
</div>
</div>


P.S.
You should use html with a strict doctype instead of xhtml.
You must not use the target attribute (as used in a previous test
example) since it can only be used in a transitional or frameset
document and therefore throws an error when validating.
You have things a little wrong and it's a shame that IE renders it as
you intended, however, a very good rule says that you should check your
work with Firefox _until_ you are satisfied with what you want and _only
then_ check how it looks in IE. 99% of the time it will look ok, but if
not, 99% of the time IE is wrong.

--
Gus

On 20 Feb, 23:39, maya <maya778... (AT) yahoo (DOT) com> wrote:

it does look like placing content side-by-side is the most challenging
aspect of div-based layouts

No, floating them is easy - it's clearing up afterwards that's hard.

Read the brainjar article

Be prepared to add no-content HTML elements (<div> or <hr>)
afterwards, solely to control the clearing.

dorayme wrote:

Gee Andy, you have a cheek! You don't think twice about la de daing it
from on high with all sorts of buzz words and high falutin' sentences!

Have you heard of this saying down under?

"If you can't dazzle 'em with your brilliance,
then baffle 'em with your bullshit."
Author: unknown

--
Gus

Gazing into my crystal ball I observed Gus Richter
<gusrichter (AT) netscape (DOT) net> writing in news:go2vvd$obq$1 (AT) news (DOT) motzarella.org:

dorayme wrote:
Gee Andy, you have a cheek! You don't think twice about la de daing it
from on high with all sorts of buzz words and high falutin' sentences!


Have you heard of this saying down under?

"If you can't dazzle 'em with your brilliance,
then baffle 'em with your bullshit."
Author: unknown

I love that! It reminds me of Red Green:
"If women don't find you handsome, they should at least find you handy."

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

Adrienne Boswell wrote:

Gazing into my crystal ball I observed Gus Richter
gusrichter (AT) netscape (DOT) net> writing in news:go2vvd$obq$1 (AT) news (DOT) motzarella.org:

dorayme wrote:
Gee Andy, you have a cheek! You don't think twice about la de daing it
from on high with all sorts of buzz words and high falutin' sentences!

Have you heard of this saying down under?

"If you can't dazzle 'em with your brilliance,
then baffle 'em with your bullshit."
Author: unknown


I love that! It reminds me of Red Green:
"If women don't find you handsome, they should at least find you handy."

Somehow this reminded me of the old Pete Seeger song:

"If I had a hammer
I'd hammer in the morning ..."

Hey! I've got a hammer! I'm handy!

--
Ed Mullen
http://edmullen.net
Boycott shampoo! Demand the REAL poo!