473,326 Members | 2,012 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

Floating a DIV to right of <Hx> element?

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

Jul 20 '05 #1
4 5240
"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/
Jul 20 '05 #2
"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/
Jul 20 '05 #3
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

Jul 20 '05 #4
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

Jul 20 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
by: Harlan Messinger | last post by:
Different pages on a web site can vary in the level of header to which they descend. One short page may have only <h1>, or <h1> and <h2>. Another, detailed page, might get all the way down to <h6>....
6
by: lostinspace | last post by:
After four+ years of using FrontPage in a limited capacity and having created over 600 pages on my sites, I've finally (at least for the most part) abandoned FP, to begin the process of converting...
4
by: news.ntlworld.com | last post by:
Hi everyone. I'm trying to emulate a simple table layout using CSS only. This hyperlink (http://homepage.ntlworld.com/r.morris7/tabledemo.htm) shows the intended result, which I've knocked up using...
2
by: Oliver Burnett-Hall | last post by:
I'm trying to move to using tableless page layouts, but I've come across what appears to be a bug in IE5's rendering that I can't find a way to overcome. The page has a sidebar to the left of...
0
by: Philip Semanchuk | last post by:
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...
11
by: Michael Kalina | last post by:
Hi everybody! I have three questions, maybe somebody could help me with it. 1. "If you have a minute or two..." I usually do not do a lot with CSS, but I decided to have my site run on pure...
300
by: Ståle Sæbøe | last post by:
I am a bit curious about this. The graphic design people I work with say it is their preferred font for web pages. The reason being that it is "kinder" to the eye both in terms of shape and...
6
by: Jean Pion | last post by:
Dear Readers, With the following CSS I wanted to create a list, where there is no empty line between the 'title' and the list. Also put the bullets closer to the left margin. And the spacing...
14
by: Stefan Mueller | last post by:
With the following code I can add a new row to an existing table. That really works great. Many thanks to all who helped me so far. But my problem is that the added cells do somehow not have the...
7
by: James Johnson | last post by:
Are there structs in JavaScript? If not, what's the closest thing, or do I just use parallel arrays? I'm populating a JavaScript array from ColdFusion query, but I don't think I can do this: ...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.