Floating a DIV to right of <Hx> element?

[Philip Semanchuk]

Hi all,
I'm trying to find a way to place a small DIV just to the right of a
header element. I've found a solution, but it is crude and I was hoping
for something more elegant. I'd appreciate any suggestions you might have.

My H1 elements have width=75%, and to the right of each I want a small
DIV that contains a hyperlink to related content. I want that link to be
about 3em from the right-hand end of the header element. The only way I
can find to place it there is to float a DIV (which I call
LinkContainer) with width=25% (25% = 100% - the width of the header
element) to the right of the header, and place the hyperlink-containing
DIV in there. Here's an example:

http://semanchuk.com/philip/temp/FloatExperiment.html

What I find inelegant about my code is that if I change the header
width, I have to remember to change the LinkContainer width too. Also,
the width of my header elements shrinks corresponding to their
significance (h2 width=60%, etc.) so I need to define corresponding
LinkContainer DIVs for each header element. It seems like there ought to
be a way to avoid the LinkContainer DIV entirely, but I can't figure out
how to describe it to the browser.

Thanks for any help
Philip

[Stan Brown]

"Philip Semanchuk" <di************@example.com> wrote in
comp.infosystems.www.authoring.stylesheets:

My H1 elements have width=75%, and to the right of each I want a small
DIV that contains a hyperlink to related content.

(and different widths for different-level headings)

Why not float the headings left instead of floating the divs right?
Give the div a 3em margin-left.

(I haven't tried this, but it seems as though it ought to work.
Usual disclaimers for MSIE 5.x.)

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

[Stan Brown]

"Philip Semanchuk" <di************@example.com> wrote in
comp.infosystems.www.authoring.stylesheets:

My H1 elements have width=75%, and to the right of each I want a small
DIV that contains a hyperlink to related content.

(and different widths for different-level headings)

Why not float the headings left instead of floating the divs right?
Give the div a 3em margin-left.

(I haven't tried this, but it seems as though it ought to work.
Usual disclaimers for MSIE 5.x.)

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

[Philip Semanchuk]

Stan Brown wrote:

"Philip Semanchuk" <di************@example.com> wrote in
comp.infosystems.www.authoring.stylesheets:

My H1 elements have width=75%, and to the right of each I want a small
DIV that contains a hyperlink to related content.

(and different widths for different-level headings)

Why not float the headings left instead of floating the divs right?
Give the div a 3em margin-left.

(I haven't tried this, but it seems as though it ought to work.
Usual disclaimers for MSIE 5.x.)

Thanks for the suggestion, Stan. That was exactly the kind of insight I
was looking for. It works perfectly on our company Intranet browser
(IE6). Under my browser of choice (Mozilla) there's a quirk to it. I'll
post here if I can't sort it out on my own.

Cheers
Philip

[Philip Semanchuk]

Stan Brown wrote:

"Philip Semanchuk" <di************@example.com> wrote in
comp.infosystems.www.authoring.stylesheets:

My H1 elements have width=75%, and to the right of each I want a small
DIV that contains a hyperlink to related content.

(and different widths for different-level headings)

Why not float the headings left instead of floating the divs right?
Give the div a 3em margin-left.

(I haven't tried this, but it seems as though it ought to work.
Usual disclaimers for MSIE 5.x.)

Thanks for the suggestion, Stan. That was exactly the kind of insight I
was looking for. It works perfectly on our company Intranet browser
(IE6). Under my browser of choice (Mozilla) there's a quirk to it. I'll
post here if I can't sort it out on my own.

Cheers
Philip