473,700 Members | 2,333 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 5285
"Philip Semanchuk" <di************ @example.com> wrote in
comp.infosystem s.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.infosystem s.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.infosystem s.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.infosystem s.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
1982
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>. Maybe the site's page also display common sidebars with their own hierarchies, such as "In the News" block divided into two or three sections ("Nation", "World", "Metro") of two or three short clips each, each ending with a link to the full...
6
1933
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 those pages. There are some things (a result of this transition,) which I'm not too happy about :-( I'm using 1st Page 2000. Much of my content is created in Word and then cut and pasted from Word-to-NotePad-to-the page. Formerly with FP the...
4
3124
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 a table. Please note a couple of things. The second line of text in the right-hand columns don't wrap beneath the italic heading. The first column contains a heading (of sorts, not an actual <hx> element) that is aligned to the right. Any...
2
1879
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 the main content area. The main content are has several subsections, each of which starts with a mini-menu of four links. I want to have these laid out across the full width of the column. Here's an ASCII attempt to show the desired page layout:
0
624
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 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...
11
2041
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 xhtml and css. Now I made it, but I do not know, whether I "coded" a good css or not. If somebody has some minutes free, could you please post your opinion on my css, which you will find here:
300
18355
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 size. The HTML "hardcore elititst" profess that it is a useless font because it is too big compared to other fonts. Personally I do not care one way or the other, but I generally trust
6
6967
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 between two list should be one line. ul.tight {margin-top:0em; margin-left:1.3em;} The html then looks like this
14
2332
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 same style as the first row which I added by HTML. I do everything with the JavaScript what I do with HTML except that the added text with the JavaScript is not <h5 class = "style_tableentry_middle">Entry middle</h5> I guess it's only somehow...
7
19252
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: var location = new Array() <cfloop query="loc"> location.name = '#loc.name#' location.address1 = '#loc.address1#'
0
8731
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9081
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8975
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
7816
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6564
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4408
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4660
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2395
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2031
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.