6 replies [Last post]
Coops111
Coops111's picture
Offline
newbie
Last seen: 9 years 38 weeks ago
Joined: 2012-11-24
Posts: 4
Points: 7

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Coops111
Coops111's picture
Offline
newbie
Last seen: 9 years 38 weeks ago
Joined: 2012-11-24
Posts: 4
Points: 7

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Coops111
Coops111's picture
Offline
newbie
Last seen: 9 years 38 weeks ago
Joined: 2012-11-24
Posts: 4
Points: 7

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>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Coops111
Coops111's picture
Offline
newbie
Last seen: 9 years 38 weeks ago
Joined: 2012-11-24
Posts: 4
Points: 7

No problem, thanks very much

No problem, thanks very much for your time.