<html>
<div style='width:300px;border:solid silver 1px'>
<div style='border:solid green 1px;'>
first div
</div>
<div style='border:solid red 1px;'>
second div
</div>
</div>
</html>
+----------------------------+
| first div |
+----------------------------+
+----------------------------+
| second div |
+----------------------------+
how would I visually reorder it via css to show up like this:
+----------------------------+
| second div |
+----------------------------+
+----------------------------+
| first div |
+----------------------------+
I can't use 'position:relative;top:-<div height>px;' & 'position:relative;top:<div height>px;' because I don't know the heights of divs in advance (their content is dinamically generated)
feyd | appears to have been accidentally stickied; undone.
I don't think that's possible without some javascript to calculate the heights of the divs on the fly.
Maybe if you knew the height of one, it would be possible. But not if you don't know any heights.
Finally, I decided to just use different template for handheld devices. With quirky css, very limited js and overall weirdness of IE on my iPAQ it isn't worth the hassle to try to solve it on the client-side.
I don't feel they were introduced to solve tag placement issues. Separating visual logic away, yes. While they sound similar I don't agree that they are. I only see a very small amount of overlap.
Just tell your clients to turn their monitor upside down.
Actually, You'll really need javascript to do this. CSS is only designed to seperate content from layout, not make dynamic interfaces. Or as feyd said you can do it server side, but that would require a refresh
I disagree that something like this should be left up to the server. The server should spit out straight content. Let css and javascript dom handle everything visual-wise. It's about time we let the clientside handle it's load of the responsibility.
As far as an answer to your problem, a messy way to do things would be to use absolute positioning. Positioning things this way ignores the the order in which elements are introduced into the DOM. This solution would require lots of positioning and sizing logic, therefor I wouldn't recommend it.
Another solution would be to reorder the DOM tree using javascript, using relative positioning to let things fall into place. The dom tree is ordered according to when the elements are introduced in the HTML file. If you have two divs at the top of the dom tree, swap their position.
Just some ideas.
Last edited by bg on Mon Aug 21, 2006 6:49 pm, edited 1 time in total.
Oren wrote:I believe this can be done with CSS (without anything else). I just haven't figured out how. When I find a solution, I'll post it here.
Edit: http://www.webcredible.co.uk has done it and it is working with JavaScript disabled too, that's why I believe this can be done with pure CSS.
The only way to do it in pure CSS is to use absolute positioning. The original poster also seemed to want to do this in a more dynamic way, as in, being able to swap the two divs after they have been originally rendered on the screen.