Sat, 2012-11-24 01:10
Hi folks,
I have two spans which obviously appear side by side when the browser window is wide enough to accommodate their contents. The catch is, when the browser window width is reduced so that the spans wrap, I'd like the first span to shift up rather than the second span shifting down. In other words, is there a way of getting content to wrap upwards instead of downwards?
Cheers,
Dan.
Sat, 2012-11-24 02:15
#1
Example?
Show us what you have, either by posting your html and your css, or by posting a link to the page.
I, for one, am having difficulty understanding the difference between one shifting down vs the other shifting up.
cheers,
gary
Sat, 2012-11-24 12:32
#2
Hi Gary, thanks for getting
Hi Gary, thanks for getting back to me.
The difference would be the anchoring of the two spans. Normally when the second span wraps, the first one stays where it is and the second one is moved below it. What I'd like to happen is for the second span to stay where it is and the first one to move above it. I'm not sure if this is possible.
I can still post some HTML and CSS if you still think it would be useful?
Cheers,
Dan.
Sat, 2012-11-24 16:04
#3
Yes, please
Do post your code—all of it.
For one thing, I don't know what, exactly, you mean by "span" in this context, nor can I yet visualize into what space the span can move. Unless you're reading bottom to top, your description seems unnatural. So, yes, post your code.
cheers,
gary
Sat, 2012-11-24 20:59
#4
Here you go
If you reduce the width of the browser window, obviously the spans will wrap. I'd like the red div to stay where it is when this happens and not get pushed down.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Page</title> <style type="text/css"> .outer-container { position: relative; top: 100px; } .inner-container { border: solid 1px red; height: 100px; } </style> </head> <body> <div class="outer-container"> <span>AAAAAAAAAAAAAAA</span> <span>BBBBBBBBBBBBBBB</span> <div class="inner-container"></div> </div> </body> </html>
Sat, 2012-11-24 21:52
#5
OK, I see what you mean, now.
OK, I see what you mean, now. What I don't see is how it would be done short of removing everything from the flow. You cannot imagine all the problems that would cause, and it might work anyway. You do not want to go there.
You could put a wrapper around the content and give it a minimum width, so that instead of shifting, the page would require horizontal scrolling. I still cannot imaging a real world use case for what you want.
cheers,
gary
Sun, 2012-11-25 00:08
#6
No problem, thanks very much
No problem, thanks very much for your time.