'clear' help needed

[dorayme]

In full try http://www.aljones.us/vad.html
getting ready for work ... I'll look at the rest of your message when I get
back home.

Oh, well... this one does look more like my suggested markup to
you.

You need to understand what is going on and adapt according to
the actual material. Please read my previous remarks about giving
margins for floats to sit as this will help you and stop some
unwanted behaviour. You also need to add a "clear" instruction to
the <h1>. You will get there.

 

[dorayme]

Huh? It's not that complicated. He can't do what he wants without some
additional markup, but all he needs to do is explicitly set clear:left
on *some* h3 elements. The end.

It's not tabular data by a long shot.

If folk are having a lot of difficulty with floats, I can
sympathise with them using tables till the pennies drop about
better practice.

 

[mbstevens]

Huh? It's not that complicated. He can't do what he wants without some
additional markup, but all he needs to do is explicitly set clear:left
on *some* h3 elements. The end.

Perhaps you'd like to post an example page to illustrate your point,
as doreme and myself have been doing.

 

[Bergamot]

Perhaps you'd like to post an example page to illustrate your point

http://www.bergamotus.ws/samples/aljones.us.html

Set clear:left on the first h3 element following the journal entry
associated with the image, or whatever element needs to start below the
floated element. I used inline styles here, but the OP might prefer to
use a class selector instead.

I admit that an additional change to the stylesheet was needed,
specifically that "clear" could cause stuff to wrap below the navbar. It
was only noticeable in IE, since it doesn't support the max-height used
on the navbar. A couple property changes on the #moststuff rules was it.

Is this not what the OP wanted?

 

[mbstevens]

http://www.bergamotus.ws/samples/aljones.us.html

Set clear:left on the first h3 element following the journal entry
associated with the image, or whatever element needs to start below the
floated element. I used inline styles here, but the OP might prefer to
use a class selector instead.

I admit that an additional change to the stylesheet was needed,
specifically that "clear" could cause stuff to wrap below the navbar. It
was only noticeable in IE, since it doesn't support the max-height used
on the navbar. A couple property changes on the #moststuff rules was it.

Is this not what the OP wanted?

"For each image I will probably have three different h3 / p pairs (the
date and associated text). If it were to do what I'm trying to achieve,
Your line 'Meyer quote' and my line 'heading test' would both be to the
right of the (supposedly) associated image With the releated text
immediately below them. "

He specifies the main headings to stay to
the right of the image on my reading. Yours is kind of sitting on top
of its right side. And the first part of the related text ("Today there
has been...") is beside it, not below, as he asks for.

 

[al jones]

http://www.bergamotus.ws/samples/aljones.us.html

Set clear:left on the first h3 element following the journal entry
associated with the image, or whatever element needs to start below the
floated element. I used inline styles here, but the OP might prefer to
use a class selector instead.

I admit that an additional change to the stylesheet was needed,
specifically that "clear" could cause stuff to wrap below the navbar. It
was only noticeable in IE, since it doesn't support the max-height used
on the navbar. A couple property changes on the #moststuff rules was it.

Is this not what the OP wanted?

Nope, I've seen enough variationas and tried enough of the offered
solutions (which I appreciate since it let's me see different ways of
trying things) that maybe it's time to return to the original ...

Take a look at http://aljones.us/630817vad.html, with one exception, this
is what I'm striving to attain. The text is beside the associated image
(so the text for Aug 17 - 19 is to the right of the diary image for Aug
17-19). The problem displays itself where the text is shorter than the
image and the next image floats itself to the right. You may have to open
up the browser to see this effect, if it's narrow enough, then the text
stretches and the images do fall correctly...)

Apprecatively

//al

 

[John Hosking]

Nope, I've seen enough variationas and tried enough of the offered
solutions (which I appreciate since it let's me see different ways of
trying things) that maybe it's time to return to the original ...

Take a look at http://aljones.us/630817vad.html, with one exception, this
is what I'm striving to attain. The text is beside the associated image
(so the text for Aug 17 - 19 is to the right of the diary image for Aug
17-19). The problem displays itself where the text is shorter than the
image and the next image floats itself to the right. You may have to open
up the browser to see this effect, if it's narrow enough, then the text
stretches and the images do fall correctly...)

Good grief, I thought this thing was solved days ago. I couldn't
understand why the thread kept going. I thought the tables idea was the
*second* usable solution.

Here's mine (from about four days ago, which I never posted since you
seemed to have it all under control...):
http://mypage.bluewin.ch/jlh/AlJonesPersonal.htm

It's been so long now that I don't completely remember what I did. But I
did make these notes about the #moststuff rules:

padding: .5em; instead of 1% to eliminate horiz scroll;
width:69%; not width: auto; for Opera and IE6;
FLOAT:right; for Opera and, well, because it is.

Maybe you'll tell me that you already tried this and you didn't like it,
in which case, I'm sorry I missed that in the earlier back-and-forth. I
*am* sure about the padding - scrollbar thing though. ;-)

Apprecatively

//al

A real sig separator is two dashes and a space, alone on one line.

 

[al jones]

Good grief, I thought this thing was solved days ago. I couldn't
understand why the thread kept going. I thought the tables idea was the
*second* usable solution.

Here's mine (from about four days ago, which I never posted since you
seemed to have it all under control...):
http://mypage.bluewin.ch/jlh/AlJonesPersonal.htm

It's been so long now that I don't completely remember what I did. But I
did make these notes about the #moststuff rules:

padding: .5em; instead of 1% to eliminate horiz scroll;
width:69%; not width: auto; for Opera and IE6;
FLOAT:right; for Opera and, well, because it is.

Maybe you'll tell me that you already tried this and you didn't like it,
in which case, I'm sorry I missed that in the earlier back-and-forth. I
*am* sure about the padding - scrollbar thing though. ;-)

And I'm absolutely certain that appreciate that omeone finally *really*
understood what it was I am trying to achieve (see my reffed page)

That portion works like a charm - doing what I expect (want) it to. ((I'm
really leary of saying 'I want ...' because someone will have to respond
with 'Stop wanting that ...'))

I still see some inconsistencies - but this will let me get on my way with
reformatting the rest of the diary entries - which was the whole reason
behind this exercise.

A real sig separator is two dashes and a space, alone on one line.

That wasn't really a signature - it's just the way I close most of my
messages. As a TTY operator during *my* war, we normally signed our
messages with '//<initials>' and it just hangs over. ((So tell me it
shouldn't hang over .... ))

Thanks //al

 

[al jones]

Forget clear and float. You have enough inter-associations of information
to interpret it (*completely* correctly) as tabular data. Just do
all styling of your tables in CSS, not in the old style markup.

Whether you have multiple small tables or one big one depends on your
semantic intent -- just try to associate information in rational ways and
keep things as simple as possible.

You could also collect associated information in container div-s.

But depending of float and clear to provide the kinds of complex
associations you appear to want is shooting yourself in the foot.

MB - While I could pull up DW and make tables out of it, *I* don't see this
as a tabular exercise, not something that is table oriented at all.
Thanks to John Hosking coming back into the thread, I now have what I was
looking for - done with html / css.

Now that I have this part of the solution - or at least the part I was
specifically lookking for - I guess I have my weekend cut out for me
redoing the diary entries (some a little, and some that I haven't done at
all *a lot*).

 

[al jones]

I already know this displays improperly in FireFox. One problem at a time,
please.

<< snipped >>

I'll talk to myself here since so many people have put in thier pfennigs
worth. My appreciation to John Hoskings who saw what I was trying to do
and made it happen - Thank You, Sir!!

To everyone else who has commented (even if it was slightly<??> off topic -
even amusement helps) Thanks for the education, even if it wasn't what I
was trying to accomplish, it was enough information to expand my horizons -
maybe only by a percent or two (my limitations, not yours!) but it gives me
the chance to see different ways people interpret what one says and then
set about their solution.

Thanks //al

 

[Jonathan N. Little]

That wasn't really a signature - it's just the way I close most of my
messages. As a TTY operator during *my* war, we normally signed our
messages with '//<initials>' and it just hangs over. ((So tell me it
shouldn't hang over .... ))

Thanks //al

See how your "signature" is in the above quote? If your use a proper
signature marker of [hyphen][hyphen][space][carriage-return] as I have
below then folks with decent news clients will remove the signature bit
automatically when quoting. It is a small thing but it also an act of
courtesy. If you like your double slashes, fine, just add a signature
marker above:

 

[Ben C]

In case anyone is interested, I was supposing that when you have
a box and float stuff in it, subsequent clears in that box would
apply only to the floats in that box.

No, clear clears any floats that are in the way (or perceived to be in
the way).

But yesterday I had a clear that took account of another float outside
the box. Or sure seemed to!

That is correct behaviour.

Simple enough really though: page had a left floated nav col and
a right content div box (margined to give the left nav float a
formal space to sit in). Inside the div content box, at the very
start I had a little float (to accommodate one drop-cap letter -
it is all Farmer Joe's fault), for a little one line sentence.
The point is that when I cleared the float for the next heading,
the heading jumped down to clear the nav floated box. It is no
good me knowing this is "correct" behaviour.

I'd better try and explain it then. See below.

I need to think about it more not to be puzzled! Perhaps I have missed
something quite simple and if fixed, can go back to using clear
properly!

I think the thing that's easy to forget about floats is that they're
sort of intended for things like pictures and diagrams embedded among
paragraphs of text.

If you're using them like that, you want them to overflow the bottom
edges of paragraphs, and for text in following paragraphs to flow around
them. You want clear to clear any float that's in the way, regardless of
whether it originated in an earlier paragraph.

Another natural consequence of the "intended" purpose of floats is the
rule that a block box doesn't usually grow vertically to accommodate the
floats in it. This was causing someone trouble recently on one of the
c.i.w.a.* groups.

The rules seem quite natural when you're embedding diagrams in a series
of paragraphs, but sometimes catch people out in unexpected ways when
when they're using floats to do columns or to simulate inline-blocks.

I think the reason it's particularly counterintuitive in your example is
that the big white div has a left-margin, so the nav col float is
already out of the way of the text. But the browser doesn't think like
that, it just applies the rules, and clear means "go down past the
floats". As far as it's concerned, the margin has nothing to do with it.

 

[dorayme]

No, clear clears any floats that are in the way (or perceived to be in
the way).

Yes, I came to realise, disappointedly, that this might be the
case. I would think that in future css, the suggestion implied in
my para above - considering that floats are often used these days
for columnar purposes - might be worth considering.

I think the reason it's particularly counterintuitive in your example is
that the big white div has a left-margin, so the nav col float is
already out of the way of the text. But the browser doesn't think like
that, it just applies the rules, and clear means "go down past the
floats". As far as it's concerned, the margin has nothing to do with it.

Indeed. And thanks for your explanations. It is not that often I
use floats in this situation or, to put it slightly differently,
when I do, they have usually cleared the nav col naturally by
being introduced "after" the nav col data has finished. Luck of
the game as to when I would come across it.

As it happens, for experiment only, this is not a site launched
with any of my work in it yet, I tried

<http://www.netweaver.com.au/khs/>

where I have a

<div class="clear"></div> after the sentence employing the
floated drop cap. And the <h2> below, now behaving itself as I
want and no longer clearing the nav col float (reminder,
previously I had cleared this <h2> andt cause my surprise).


..clear {

margin: 0;
margin-top: 40px;
}


This has not resulted in any clearing of _all_ the floats, just
the one I wanted cleared. The effect seeming to be what I want.
How come this div, empty as it is, "starts" before the navigation
pane float ends (height-wise, if you follow me)? As against the
direction in which your explanation was meaning (I have left out
quoting it here). Obviously because it is empty, but is this not
slightly counter-intuitive again after one has trained one's
intuition to accept the clearing of all floats as correct?

This clearing div is doubtless not semantically kosher. But that
is strictly another issue. Doubtless, I am missing something. But
it is an interesting matter.

 

[Ben C]

Yes, I came to realise, disappointedly, that this might be the
case. I would think that in future css, the suggestion implied in
my para above - considering that floats are often used these days
for columnar purposes - might be worth considering.

I think better would be for inline-block to work everywhere (the
situation is already improving), use that for columns instead.

[snip]

<http://www.netweaver.com.au/khs/>

where I have a

<div class="clear"></div> after the sentence employing the
floated drop cap. And the <h2> below, now behaving itself as I
want and no longer clearing the nav col float (reminder,
previously I had cleared this <h2> andt cause my surprise).


.clear {

margin: 0;
margin-top: 40px;
}

You could alternatively put the margin-top on the h2 ("Who we are").

This has not resulted in any clearing of _all_ the floats, just
the one I wanted cleared. The effect seeming to be what I want.
How come this div, empty as it is, "starts" before the navigation
pane float ends (height-wise, if you follow me)?

There's no "clear" set on it at all, just a top margin. So it starts
below the preceding block box (p id="welcome") in the normal way.

As against the direction in which your explanation was meaning (I have
left out quoting it here). Obviously because it is empty, but is this
not slightly counter-intuitive again after one has trained one's
intuition to accept the clearing of all floats as correct?

I think you must have deleted "clear: left" from .clear and forgot you'd
done it.

There is a way to get clear to restrict itself only to the white box,
which is to make the white box itself a float.

The clear and float properties only take into account floats in the same
"block formatting context", but note that a "block formatting context"
is not just any block box.

Block formatting contexts are rather obscure, but as far as I can see,
the basic purpose of them is restrict the effect of floats. Floats mess
up things in their own BFC but not outside.

 

[dorayme]

There's no "clear" set on it at all, just a top margin. So it starts
below the preceding block box (p id="welcome") in the normal way.
.....

I think you must have deleted "clear: left" from .clear and forgot you'd
done it.

This is exactly what happened! Well spotted. In fact I did first
apply the top-margin to the heading that was dropping unwanted,
got a result that was ok but then had a play and tried the empty
div clear: but, after its failure, just stuck the margin on it
instead and left it! Of course, I should have gone on to chuck it
and apply the margin back to the heading below. Sorry. Your
remarks made everything come back to me.

There is a way to get clear to restrict itself only to the white box,
which is to make the white box itself a float.

That's an idea. I just tried this quickly by floating the
"content" id ... but all sorts of things went wrong... I will
consider it when I have more time. Better not spend too much for
the sake of a drop cap. (It is all Farmer Joe's fault, he was the
one that gave me the idea of a drop cap)

 

[al jones]

Good grief, I thought this thing was solved days ago. I couldn't
understand why the thread kept going. I thought the tables idea was the
*second* usable solution.

Here's mine (from about four days ago, which I never posted since you
seemed to have it all under control...):
http://mypage.bluewin.ch/jlh/AlJonesPersonal.htm

It's been so long now that I don't completely remember what I did. But I
did make these notes about the #moststuff rules:

padding: .5em; instead of 1% to eliminate horiz scroll;
width:69%; not width: auto; for Opera and IE6;
FLOAT:right; for Opera and, well, because it is.

Maybe you'll tell me that you already tried this and you didn't like it,
in which case, I'm sorry I missed that in the earlier back-and-forth. I
*am* sure about the padding - scrollbar thing though. ;-)


A real sig separator is two dashes and a space, alone on one line.

John, could I ask you to revisit this for me, I've made a few changes and
things have fallen apart again.

I've put the european 'quote' marks in as next page / previous page on two
pages (08/??/63 WWvA and 08/11/63 WWvA Diary) clear and float aren't doing
what I expect them to - but that isn't anything new.

To add insult to injury, the image alignment which was working has just
fallen apart again - and since you've understood what I've been trying to
do, I'm imposing - if you would be so kind.

 

[John Hosking]

I've put the european 'quote' marks in as next page / previous page on two
pages (08/??/63 WWvA and 08/11/63 WWvA Diary) clear and float aren't doing
what I expect them to - but that isn't anything new.

To add insult to injury, the image alignment which was working has just
fallen apart again - and since you've understood what I've been trying to
do, I'm imposing - if you would be so kind.

Hello, Al

Yes, I noticed yesterday you were "troubled" again but I couldn't take
time to look at your stuff then. Even now I'm a bit busy but will look
at your site a bit more soon. For now, two items which I can talk about
quickly because they're the two little things I might have a chance of
knowing what I'm talking about:

1. Your page titled/named "Forward" should really be "Foreword."
"Forward" is a direction; a "foreword" is the word(s) which come(s)
before. So your introductory text about who William Wallace Van Amber
was is really a foreword. Readers can go forward from there... ;-)

2. The European quotation marks (otherwise popularly known as LEFT- and
RIGHT-POINTING DOUBLE ANGLE QUOTATION MARKS or guillemets) are way too
small. Also, it's not readily apparent what they're doing there when
they *are* noticed. I suggest you style them larger and add a title
attribute, as for example in
<a class="ppage" title="to previous record" href="630809va1.html">«</a>.
(It would be better to say "previous letter" or "previous diary page" as
applicable, but that means you have to know what came before and after,
and be more careful about coding each page. More of a pain to maintain.)

And you don't want clear here, just float. But try rearranging the order
(no, it's not something you're expected to guess). Study (and try):

..ppage { float:left; font-size:1.4em; }
..npage { float:right; font-size:1.4em; }
h2 { text-align:center;
margin-top:0;
padding:0em; }

<a class="ppage" title="previous record" href="630809va1.html">«</a><a
class="npage" title="next record" href="630816va1.html">»</a><h2>Diary
Entries August 11th, 1863</h2>


That's all I can offer right now. More about the image alignment later.
But lets review your requirements, okay?

You want the diary pages on the left side of your main content (it's
understood the long list of letters and diary pages are on the screen's
far left, inviolate).

For each diary page image, you want the textual transcription to be to
the right of the image, with the first entry's text (starting with its
date) lining up with the top of the image containing that original text.
Yes?

Now, if the writer didn't have much to say (or the font size is
smallish), the text won't stretch down the length of the image. In this
case, you just want some empty space to the right of the lower part of
the image. Correct?

Each diary page might have three days' worth of entries, so the text
"per page" might stretch below the bottom of the page's image. (This can
also happen when the font size is large or huge or gigantic.) In this
case, what do you want to happen? Should the "extra" text flow under and
to the left, below the image? Or would you like the left margin of the
text transcription to always be a straight line, always to the right of
the images' right edges?

Do you like or dislike horizontal rules separating the diary pages'
texts (3 by 3)?

 

[al jones]

Hello, Al

Yes, I noticed yesterday you were "troubled" again but I couldn't take
time to look at your stuff then. Even now I'm a bit busy but will look
at your site a bit more soon. For now, two items which I can talk about
quickly because they're the two little things I might have a chance of
knowing what I'm talking about:

1. Your page titled/named "Forward" should really be "Foreword."
"Forward" is a direction; a "foreword" is the word(s) which come(s)
before. So your introductory text about who William Wallace Van Amber
was is really a foreword. Readers can go forward from there... ;-)

Abashed!!!! and I consider myself somewhat of a grammarian. Thanks for
pointing that out. Fixed but not uploaded. ((Sheesh!!)

2. The European quotation marks (otherwise popularly known as LEFT- and
RIGHT-POINTING DOUBLE ANGLE QUOTATION MARKS or guillemets) are way too
small. Also, it's not readily apparent what they're doing there when
they *are* noticed. I suggest you style them larger and add a title
attribute, as for example in
<a class="ppage" title="to previous record" href="630809va1.html">«</a>.
(It would be better to say "previous letter" or "previous diary page" as
applicable, but that means you have to know what came before and after,
and be more careful about coding each page. More of a pain to maintain.)

See changes related to the other half of this, I've increased the size, and
if I can get this working correctly I'd like to grab someones 'arrows' with
next / previous in them but at this point I'm not sure this isn't an
exercise in futility. Definitely more of a pain, but I'd like to see it
since it would let people go from letter to letter without having to return
to the 'index'.

And you don't want clear here, just float. But try rearranging the order
(no, it's not something you're expected to guess). Study (and try):

.ppage { float:left; font-size:1.4em; }
.npage { float:right; font-size:1.4em; }
h2 { text-align:center;
margin-top:0;
padding:0em; }

<a class="ppage" title="previous record" href="630809va1.html">«</a><a
class="npage" title="next record" href="630816va1.html">»</a><h2>Diary
Entries August 11th, 1863</h2>

see my two sample pages, you and one other in the other thread suggested
this and the results I saw weren't what I expected. I''m obviously not
understanding something ((a LOT of comsthings))

That's all I can offer right now. More about the image alignment later.
But lets review your requirements, okay? Sure ...

You want the diary pages on the left side of your main content (it's
understood the long list of letters and diary pages are on the screen's
far left, inviolate).

To the first half (position of the image / text) yes, that's true. As far
as the long list - I'd be most open to an alternative but I don't see one -
it's far from inviolate!

For each diary page image, you want the textual transcription to be to
the right of the image, with the first entry's text (starting with its
date) lining up with the top of the image containing that original text.
Yes? True ...

Now, if the writer didn't have much to say (or the font size is
smallish), the text won't stretch down the length of the image. In this
case, you just want some empty space to the right of the lower part of
the image. Correct? Again true ...

Each diary page might have three days' worth of entries, so the text
"per page" might stretch below the bottom of the page's image. (This can
also happen when the font size is large or huge or gigantic.) In this
case, what do you want to happen? Should the "extra" text flow under and
to the left, below the image? Or would you like the left margin of the
text transcription to always be a straight line, always to the right of
the images' right edges?

Preference is to have it flow under the associated imag - as it does now
when things are working correctly.

Do you like or dislike horizontal rules separating the diary pages'
texts (3 by 3)?

I've put <hr/>'s in several pages - it provides a c;ean break between the
one set of images and text and the next set. '(3 by 3)' Not sure what you
mean by this.

I'm trying to get dressed - my truck is sitting in the yard waiting for me
to appear, like everyone else I have a day job that seems to make demands
on my time - that said, I appreciate your efforts on helping this layman.
(actully I appreciate everyones help!!)

I'm now running late so I'm gone, thanks //al

 

[al jones]

Abashed!!!! and I consider myself somewhat of a grammarian. Thanks for
pointing that out. Fixed but not uploaded. ((Sheesh!!)
See changes related to the other half of this, I've increased the size, and
if I can get this working correctly I'd like to grab someones 'arrows' with
next / previous in them but at this point I'm not sure this isn't an
exercise in futility. Definitely more of a pain, but I'd like to see it
since it would let people go from letter to letter without having to return
to the 'index'.
see my two sample pages, you and one other in the other thread suggested
this and the results I saw weren't what I expected. I''m obviously not
understanding something ((a LOT of comsthings))
To the first half (position of the image / text) yes, that's true. As far
as the long list - I'd be most open to an alternative but I don't see one -
it's far from inviolate!
Preference is to have it flow under the associated imag - as it does now
when things are working correctly.
I've put <hr/>'s in several pages - it provides a c;ean break between the
one set of images and text and the next set. '(3 by 3)' Not sure what you
mean by this.

I'm trying to get dressed - my truck is sitting in the yard waiting for me
to appear, like everyone else I have a day job that seems to make demands
on my time - that said, I appreciate your efforts on helping this layman.
(actully I appreciate everyones help!!)

I'm now running late so I'm gone, thanks //al

P*I*N*G -- hey John, did you forget you asked the questions to which I
provided answers; I'm waiting on the next course! I've tried to strip
down some of what I've been doing to see if I can understand, better, why
it isn't working right, but I'm still stuck!

//al