473,578 Members | 2,997 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Question about floating and position in HTML source

Hello,

I'm not sure if this is a stupid question or not, so here goes. Suppose
I want to achieve the very common design layout as shown here...
http://www.kidsinaction.org.uk/floating.html This has a load of text
(waffle in this case) with a div floated over to the right.

If you look at the HTML, you will see that the HTML for the quick links
div comes before the actual content of the page. That makes it easy to
float over to the right, and have the content wrap around it.

Now, suppose I want to achieve the same visual effect, but have the HTML
for the quick links *below* the HTML for the content. Can this be done?
I know I could use absolute positioning, but then the links div would be
taken out of the document flow, so I would have to set a right margin on
the content, meaning that it would not wrap underneath the links div.

Can this be done? TIA

--
Alan Silver
(anything added below this line is nothing to do with me)
May 30 '06 #1
5 1422
Alan Silver wrote:
Hello,

I'm not sure if this is a stupid question or not, so here goes. Suppose
I want to achieve the very common design layout as shown here...
http://www.kidsinaction.org.uk/floating.html This has a load of text
(waffle in this case) with a div floated over to the right.

If you look at the HTML, you will see that the HTML for the quick links
div comes before the actual content of the page. That makes it easy to
float over to the right, and have the content wrap around it.

Now, suppose I want to achieve the same visual effect, but have the HTML
for the quick links *below* the HTML for the content. Can this be done?
I know I could use absolute positioning, but then the links div would be
taken out of the document flow, so I would have to set a right margin on
the content, meaning that it would not wrap underneath the links div.

Can this be done? TIA


Has there been a solution to this, as I'd like to know the answer?

CM

--
== Not nuts, just a little eccentric ==
http://www.africanbush.co.za
African Bush Tours and Safaris
Jun 10 '06 #2
pecan <pe**********@i africa.com> wrote:
Has there been a solution to this, as I'd like to know the answer?


It's not possible.

--
Spartanicus
Jun 13 '06 #3
To further the education of mankind, Alan Silver <alan-
si****@nospam.t hanx.invalid> vouchsafed:
Hello,

I'm not sure if this is a stupid question or not, so here goes. Suppose
I want to achieve the very common design layout as shown here...
http://www.kidsinaction.org.uk/floating.html This has a load of text
(waffle in this case) with a div floated over to the right.

If you look at the HTML, you will see that the HTML for the quick links
div comes before the actual content of the page. That makes it easy to
float over to the right, and have the content wrap around it.

Now, suppose I want to achieve the same visual effect, but have the HTML
for the quick links *below* the HTML for the content. Can this be done?
I know I could use absolute positioning, but then the links div would be
taken out of the document flow, so I would have to set a right margin on
the content, meaning that it would not wrap underneath the links div.

Can this be done? TIA


Y U want to do this, I dunno, but it could be done by using a placebo copy
of "quick links" with same dimensions and absolutely positioning the real
"quick links" div over it.

--
Neredbojias
Infinity has its limits.
Jun 13 '06 #4
Spartanicus <in*****@invali d.invalid> wrote:
Has there been a solution to this, as I'd like to know the answer?


It's not possible.


I should have said that it is not practical in most real world
scenarios. Only when the floated box has a width and height that changes
in a predictable manner can a dummy element with no content be floated
to "reserve" a space in the flow, the actual content could then be
positioned into that reserved space.

http://homepage.ntlworld.ie/spartani...oned_float.htm

In the real world the width and/or height of an element containing text
is rarely predictable due to client font size variations and possible
wrapping of the text content.

--
Spartanicus
Jun 13 '06 #5
In article <Xn************ *************** ******@208.49.8 0.251>,
Neredbojias <http@?.neredbo jias.com/fliam.php?cat=a lt.html.invalid >
writes
To further the education of mankind, Alan Silver <alan-
si****@nospam. thanx.invalid> vouchsafed: <snip>
Can this be done? TIA


Y U want to do this, I dunno,


Well, I can think of two reasons straight off. First, research suggests
that many (most?) search engines give more weight to text the further up
the HTML it is, all other factors being equal of course. If the first
part of your page contains nothing but a load of links, and the real
page content is further down, you are giving it (slight) disadvantage in
the SE indexing.

Second, if someone is using a text browser or screen reader etc, and
they load up a page and see piles of links, it doesn't exactly give them
a great browsing experience. Sure, you can (and should) add a "Jump to
main content" link at the top, but why subject them to that if you don't
have to? If you can put the content itself at the top, you are far more
likely to please people using such devices.
but it could be done by using a placebo copy
of "quick links" with same dimensions and absolutely positioning the real
"quick links" div over it.


That's how I ended up doing it. I added an empty <div> at the start of
the content and floated it in the position where the links were to
appear. I had the HTML for the links lower down, and positioned these
absolutely over the empty <div>.

This works fine for link lists (or whatever) where you know the amount
of content in advance, but is more difficult if the links are generated
dynamically. It can still be done if you can assume (as is often the
case) that the links each take up one em vertically, and you know the
padding and margins. You then have to write out the height of the empty
<div> dynamically, based on the contents. It's messy, but works.

HTH

--
Alan Silver
(anything added below this line is nothing to do with me)
Jun 13 '06 #6

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

Similar topics

16
7357
by: Michael Bernstein | last post by:
Hello, I've tried to solve this problem six ways from sunday, but I'm conceding defeat and asking for help at this point. The following site is rendering *very* oddly in Mozilla only. IE seems to lay it out just fine: http://pythonphotos.org
11
2628
by: NS | last post by:
I am relativly new to css positioning and have a question regarding the display of a DHTML pop-up Here is the basic HTML I am using: <html> <head> <script language="JavaScript"> <!--
6
26057
by: Simon Wigzell | last post by:
How do a create a floating div that will always stay in the same place relative to the browser window as the user scrolls the main page? I guess an adaptation of one of these floating menus that always stay in view would work but I just need the few lines of code to keep it positioned a certain x and y pix location from the window top left...
7
1835
by: Frances Del Rio | last post by:
http://www.francesdelrio.com/fixed_div.html I picked up this neat script from www.dynamicdrive.com that does something I had always wanted to do, namely put a div at a certain distance from bottom of pg (for name-&-add-of-co footer..) and have it stay there even if user scrolls up or down.. but: it gets screwed up if user resizes window...
3
9235
by: Oliver Bryant | last post by:
I just finished developing a javascipt component allowing floating captions to appear over HTML elements. If anyone wants to check it out you can see specs and download it from http://boxover.swazz.org. There is a demo there as well.
9
1771
by: David Veeneman | last post by:
I'm working on a project that uses floating-point values (doubles), and I'm being driven crazy by something pretty basic. I understand that it's in the nature of floating-point calculations to produce values like 0.10000000000000003, when what I really want is 0.1. But is there any way to eliminate that digit at the end? I've tried rounding,...
3
1760
by: hantechs | last post by:
<html> <body> <p style="width:30%;">text1</p> <p style="float:left;">text2</p> </body> </html> The effect of this html code is : text1 and text2 each is on a line. My question is: Why text2 is positioned on the right of text1? Because the CSS2.1 said: A floating element must be placed as high as possible; A left-floating element must be...
3
1243
by: Vai2000 | last post by:
Hi All, I am coming from old school web-design so prefer table layout. I see people using div just everywhere...? Why aren't they using tables? which is better? esp. when u have objects custom controls, grid views etc....to drop on pages.. TIA
4
2460
by: Jason Carlton | last post by:
I'm working with the cookie-cutter code located here: http://www.jtricks.com/javascript/navigation/floating.html Very helpful script, BTW! I'm trying to modify it, though, so that the menu will scroll relative to a parent DIV instead of the main window. So, I have something like this (simplified so that you can copy it to your viewer...
0
7850
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...
0
7779
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8291
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...
1
7874
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...
0
8150
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6524
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...
1
5664
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...
0
3786
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...
0
1114
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...

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.