How to position a div above another div while placed after that div? (see descr.)
Asked by
klaas4 (
2194)
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
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.
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.
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’){...”.
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
This question is in the General Section. Responses must be helpful and on-topic.