HighDots Forums  

Floating a DIV to right of <Hx> element?

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss Floating a DIV to right of <Hx> element? in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
Philip Semanchuk
 
Posts: n/a

Default Floating a DIV to right of <Hx> element? - 04-12-2004 , 04:33 PM






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


Reply With Quote
  #2  
Old   
Stan Brown
 
Posts: n/a

Default Re: Floating a DIV to right of <Hx> element? - 04-12-2004 , 10:53 PM






"Philip Semanchuk" <diespammersdie (AT) example (DOT) com> wrote in
comp.infosystems.www.authoring.stylesheets:
Quote:
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/


Reply With Quote
  #3  
Old   
Philip Semanchuk
 
Posts: n/a

Default Re: Floating a DIV to right of <Hx> element? - 04-16-2004 , 05:17 PM



Stan Brown wrote:
Quote:
"Philip Semanchuk" <diespammersdie (AT) example (DOT) 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



Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.