CSS positioning : relative, fixed, absolute and liquid layouts

K

KatB

Please note that I have re-checked all my sources, and checked the
Internet, and either I have missed something or I have misunderstood.
Which is why I am asking.

My question is:
Can you have <div> tags in your physical html file in a specific order
(for example,
<div id="one"><p>This is div one</p></div>
<div id="two"><p>This is div two</p></div>
<div id="three"><p>This is div three</p></div>
)

yet on screen display them in a different order (eg, 3, 2, 1), with a
fluid/liquid layout, so that on browser resizing, all items are still
displayed, even though the user may need to scroll vertically?

As far as I can tell, absolute positioning reduces fluidity?

Any helpful hints, comments or suggestions would be appreciated.
Thanks,

Kat
 
R

Richard

Please note that I have re-checked all my sources, and checked the
Internet, and either I have missed something or I have misunderstood.
Which is why I am asking.
My question is:
Can you have <div> tags in your physical html file in a specific order
(for example,
<div id="one"><p>This is div one</p></div>
<div id="two"><p>This is div two</p></div>
<div id="three"><p>This is div three</p></div>
)
yet on screen display them in a different order (eg, 3, 2, 1), with a
fluid/liquid layout, so that on browser resizing, all items are still
displayed, even though the user may need to scroll vertically?
As far as I can tell, absolute positioning reduces fluidity?
Any helpful hints, comments or suggestions would be appreciated.
Thanks,


Float:left will order the divisions as "1.........2........3" while
float:right will order them as "3.........2........1".
All you have to do is THINK how it's going to look on the screen.
 
E

Erik Blair

That's an interesting development.

Are the DIV's the result of a PhP output?

Have you tried,

<P><div id="one">This is div one</div></p>
<P><div id="two">This is div two</div></p>
<P><div id="three">This is div three</div></p>

I know it looks strange, but I am a noob to this stuff too.

Hope this help!

Erik
http://www.downloadcrazy.com
 
R

rf

Float:left will order the divisions as "1.........2........3" while
float:right will order them as "3.........2........1".

Where did the OP state that the divs were to appear *across* the page?
 
R

rf

KatB said:
My question is:
Can you have <div> tags in your physical html file in a specific order
(for example,
<div id="one"><p>This is div one</p></div>
<div id="two"><p>This is div two</p></div>
<div id="three"><p>This is div three</p></div>
)

yet on screen display them in a different order (eg, 3, 2, 1), with a
fluid/liquid layout, so that on browser resizing, all items are still
displayed, even though the user may need to scroll vertically?

I assume you want these to be arranged vertically on the page.

Can't be done. You can position div 3 at the top of the page with absolute
positoning and you can position div 2 after that (the start of div 3 that
is) but you cannot position div 2 *at the end* of div 3. You don't know
where div 3 ends.

Why would you want to do this?
 
M

Mitja

My question is:
AFAIK no. What is the underlying problem? Probably there are other, more
suitable ways of solving it.
Have you tried,

<P><div id="one">This is div one</div></p>
<P><div id="two">This is div two</div></p>
<P><div id="three">This is div three</div></p>

I know it looks strange, but I am a noob to this stuff too.

No offence, but one can tell :)
Not only could this in no way help with OP's question, it is also
incorrect. A paragraph can't containt block-level elements, e.g. divs.

Also, please don't top-post.
 
A

Andy Dingley

Can you have <div> tags in your physical html file in a specific order
yet on screen display them in a different order (eg, 3, 2, 1), with a
fluid/liquid layout,

No. If you want real fluidity to work well, the order in the document
is significant.
 
K

KatB

rf said:
I assume you want these to be arranged vertically on the page.

Can't be done. You can position div 3 at the top of the page with absolute
positoning and you can position div 2 after that (the start of div 3 that
is) but you cannot position div 2 *at the end* of div 3. You don't know
where div 3 ends.

Why would you want to do this?

Thank you for replying.

I was reading about search engine optimisation, and it was suggested
that having the actual content closer to the opening body element(tag)
would be beneficial.

So I thought maybe I could have the content listed first, then the
navigation, and at last, the logo, and use CSS to rearrange it.

Instead I will minimise the logo and the navigation to bear bones
essentials.

Again, Thank you:)

Kat
 
R

rf

KatB said:
I was reading about search engine optimisation, and it was suggested
that having the actual content closer to the opening body element(tag)
would be beneficial.

Ah, thought this might have been what you were after.

I really don't think it makes any difference. The SE's bot is going to read
all of the text anyway.

Probably of more importance is to use the correct elements to mark up your
content. For example a bot will pay more attention to your headings if they
are inside a said:
So I thought maybe I could have the content listed first, then the
navigation, and at last, the logo, and use CSS to rearrange it.
Instead I will minimise the logo and the navigation to bear bones
essentials.

I would think you should do this anyway.

The most important viewer of your page is your human viewer. You have eight
to eleven seconds to grab her attention enough to stay on the page.

A huge logo or navigation scheme at the top of the page is not going to do
that. Some worthwhile content is :)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,902
Latest member
Elena68X5

Latest Threads

Top