473,466 Members | 1,377 Online
Bytes | Software Development & Data Engineering Community
Create 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 1415
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**********@iafrica.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.thanx.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*****@invalid.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.80.251 >,
Neredbojias <http@?.neredbojias.com/fliam.php?cat=alt.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
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...
11
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
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...
7
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...
3
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...
9
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...
3
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...
3
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...
4
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...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
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,...
0
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...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
1
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...
0
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...
0
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,...
0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

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.