Right aligned floats and content linearity

A right aligned float next to a paragraph needs to be placed before the
paragraph in the source, this causes the content order to be opposite in
the visual and aural domain.

Anyone know of a solution to that problem?


Headless

--
Email and usenet filter list: http://www.headless.dna.ie/usenet.htm

Headless wrote:

A right aligned float next to a paragraph needs to be placed before the
paragraph in the source, this causes the content order to be opposite in
the visual and aural domain.
Anyone know of a solution to that problem?

Hi Headless, the first three solutions that come in my mind are:

- float the paragraph to left instead the div to the right
- float them both, one to left and the other to right
- use absolute positioning

HTH,
SantaKlauss

SantaKlauss wrote:

| A right aligned float next to a paragraph needs to be placed before the
| paragraph in the source, this causes the content order to be opposite in
| the visual and aural domain.
| Anyone know of a solution to that problem?

Hi Headless, the first three solutions that come in my mind are:

- float the paragraph to left instead the div to the right

Won't work. (the paragraph will occupy the full width)

- float them both, one to left and the other to right

Won't work. (see above)

- use absolute positioning

Won't work. (absolutely positioned elements are removed from the flow)


Headless

--
Email and usenet filter list: http://www.headless.dna.ie/usenet.htm

Headless asked, SantaKlauss answered and Headless replied:

| A right aligned float next to a paragraph needs to be placed before the
| paragraph in the source, this causes the content order to be opposite in
| the visual and aural domain.
| Anyone know of a solution to that problem?

Hi Headless, the first three solutions that come in my mind are:
- float the paragraph to left instead the div to the right

Won't work. (the paragraph will occupy the full width)

Yes, it's true.

- float them both, one to left and the other to right

Won't work. (see above)

I' ve worked on this solution, and it will be sufficient to
specify the width of the two elements:

p#content{
float: left;
width: 70%;
}

div#sidenote{
float: right;
width: 29%;
border: 1px solid #000
}

For a strange reason, Opera 7.1 won't float the sidenote if the sum of
percentages is 100%, so I put on 99%.

- use absolute positioning
Won't work. (absolutely positioned elements are removed from the flow)

I think it will work. Try to put the two elements on a relative positioned container
to allow absolute positioning in it. For example:

<div style="position: relative">
<p style="position:absolute; top:0; left:0; width:80%">
<!-- paragraph content here -->
</p>
<div style="top:0; right:0; width:20%">
<!--sidenote content here-->
</div>
</div>

Have a look on the tutorial on positioning on www.brainjar.com
and keep in mind that IE will consider padding as part of the width,
while other browsers, correctly, don't. You could find Tantek's
Box Model hack here:
http://tantek.com/CSS/Examples/boxmodelhack.html

HTH,
SantaKlauss

In article <ouimlv8c7dtjd832pr0mhad8ak6h7v9s60 (AT) 4ax (DOT) com> in
comp.infosystems.www.authoring.stylesheets, Headless
<me (AT) privacy (DOT) net> wrote:

SantaKlauss wrote:

- use absolute positioning

Won't work. (absolutely positioned elements are removed from the flow)

Of course you _could_ specify appropriate margins ...

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

SantaKlauss wrote:

| >| A right aligned float next to a paragraph needs to be placed before the
| >| paragraph in the source, this causes the content order to be opposite in
| >| the visual and aural domain.
| >| Anyone know of a solution to that problem?

| >Hi Headless, the first three solutions that come in my mind are:
| >- float the paragraph to left instead the div to the right

| Won't work. (the paragraph will occupy the full width)

Yes, it's true.

| >- float them both, one to left and the other to right

| Won't work. (see above)

I' ve worked on this solution, and it will be sufficient to
specify the width of the two elements:

p#content{
float: left;
width: 70%;
}

Won't work (text won't flow beneath the float).


Headless

--
Email and usenet filter list: http://www.headless.dna.ie/usenet.htm

Stan Brown wrote:

- use absolute positioning

Won't work. (absolutely positioned elements are removed from the flow)

Of course you _could_ specify appropriate margins ...

You've lost me, explain please.


Headless

--
Email and usenet filter list: http://www.headless.dna.ie/usenet.htm

Headless <me (AT) privacy (DOT) net> wrote:

A right aligned float next to a paragraph needs to be placed before the
paragraph in the source, this causes the content order to be opposite in
the visual and aural domain.

Anyone know of a solution to that problem?

I'm afraid there's no solution, if you wish to get the specific visual
effect.

As a workaround, you might consider putting an "invisible" explanation of
the situation before the floated element, using a transparent single-pixel
gif with the explanation as the alt text:
<div><img alt="The following paragraph is an illustration of the
principle described after it." src="transp.gif" width="1"
height="1"></div>

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Santaklauss wrote and Hedleass replied:

I' ve worked on this solution, and it will be sufficient to
specify the width of the two elements:

p#content{
float: left;
width: 70%;
}

Won't work (text won't flow beneath the float).

Well, as I inteded your question, it will work... since
you didn't specified that you wanted the text to flow
even under the floated sidenote (or image or whatever).
Guess there's no solution though...

Greetings,
SantaKlauss

"SantaKlauss" <santaklaussHATESSPAM (AT) mail (DOT) md> writes:

p#content{
float: left;
width: 70%;
}

div#sidenote{
float: right;
width: 29%;
border: 1px solid #000
}

For a strange reason, Opera 7.1 won't float the sidenote if the sum of
percentages is 100%,

The sum of the width would be 100% + 2px, me thinks.

so I put on 99%.

As long as the containing block's content area is >= 200px, that works
(if I can calculate that, no rocket science is involved).

and keep in mind that IE will consider padding as part of the width,
while other browsers, correctly, don't.

Hear, hear.


--
"The average usefulness of a thread is inversely proportional to the
cube of the number of groups it is posted to."
--Korpela's 42nd Law about Usenet