General Question

klaas4's avatar

How to position a div above another div while placed after that div? (see descr.)

Asked by klaas4 (2176points) May 30th, 2009

Hello all,

I’ve got a div, say class=“divA” and another other placed below that:

<div class=“divA”>some text in div A</div>
<div class=“divB”>some text in div B</div>

which would output the following:

——————————————————————-
some text in div A
——————————————————————-

——————————————————————-
some text in div B
——————————————————————-

But now, I want to show div B before div A, using only css, doesn’t use position:aboslute/fixed and works in all browsers. I want those div’s to behave like normal flow, except the fact they’re placed in different order. I could imagine placing the to in a container div, and applying a CSS-property, but I don’t know which one.

The reason I want this is because in div A, a PHP-file is included, and the results from the code from that page determines (using a $_SESSION var) if div B should be showing. I can’t put div B before div A, for now hopefully obvious reasons.

If someone could help, I would be very grateful!
Davey

Observing members: 0 Composing members: 0

4 Answers

jrpowell's avatar

I saw this the other day. Look for the fourth tip.

Not sure if that is exactly what you want but you might want to take a look.

klaas4's avatar

I’m sorry I didn’t mention, but div A and div B do not have a fixed height, so you can’t use that. Also, it does make use of absolute positioning, where I’m not very fond of.

Vincentt's avatar

Unfortunately, you can’t do this unless you know the height of div a.

However, it sounds a like a code-reorganization would be in order. You’ll probably want to separate presentation from logic, thus in this case you might want to split the code that checks whether B should be present to a separate file. You can use “return true;” in that file and then before B you can do “if(include ‘thefile.php’){...”.

tomasreichmann's avatar

It would help, if you could show us the site you are working on. I dont think you can position something before something else without using absolute or relative positioning if the elements don’t have a fixed height without useing javascript for example. A not so elegant solution might be to use a relative positioning on both elements to swap them and leave enough room before and after both elements to cover the variable height. Also you may try setting fixed height and overflow: auto property, which may add scrollbars if the content is too long. Other than that, I belieave that the elegant solution is inside that PHP

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther