Side Scrolling with NO fixed width?

I have the following css controlling two elements.

I need the site-content to auto fill across the page rather than down.

Even with a set height the content inside still flows down rather than across.

I know if i put a set width it will do that, but the content might be more or less depending on what page?

Anyway to achieve this without a fixed width? JS or what not…?

Any ideas…?

Thanks :slight_smile:

Hi,

Eric has given a load of examples and the one I usually use is the negative right margin on a parent float that allows all the inner floats to line up without wrapping. There is a limit in Opera in how wide you can go (32778px) so don’t go too mad .

http://www.pmob.co.uk/temp/sideways-scroll-with-fixed-foothead2.htm

This allows any number of items to line up without needing to know the width.

Hi,

I couldn’t really tell what you wanted so. Here is how to do a scrolling site http://www.visibilityinherit.com/code/horizontal-website.php and here is a scrolling section http://www.visibilityinherit.com/code/scroller.php

I’ve put the images in a list now however, its back to dropping the final one…

So i added

#site-content li{float:left}

but not luck still drops the last image…?

I’d need to see to see the code to see why they were stacking but sounds as though a main container wasn’t floated somewhere along the line. Each speparate block must be floated just like you normally would if you wanted something horizontal.

It seems you may have sorted it anyway :slight_smile:

Cheers Paul, thats worked a treat :slight_smile:

What do you mean… class the container, you mean have another container inside site-content?

Yeah that made it worse they all just stacked.

I think i’ve just fixed it, not sure if right way about it though.

I’ve put the ul and images inside a div and floated that left, seems to have cleared it up…

Ah ok i see what you mean by class name now.

What do you mean… class the container, you mean have another container inside site-content?

No I meant add a class to that p element that was holding all the images so that you could address it specifically. :slight_smile:

p.imagewrap{etc…}

Did you float the ul as well?

Update

By looks of it the images drops the last one because they are all in a p tag.

Anyway round this?

This will be a WP site so all content will be in p tags…

Hi,

You haven’t floated the p element containing the images and you haven’t floated the images either. All new blocks in tat section must be floated ot they drop to a new line.


p,img{float:left}

Of course you should class that container rather than address all p elements. However all those images would be more semantic in a ul/list structure and then the html would format nicely also.

Thanks guys :slight_smile:

Been playing around with your suggestion Paul and i’ve managed to break it.

I have the following css…

#site-header{
background:none repeat scroll 0 0 blue;
height:133px;
left:0;
position:fixed;
top:0;
width:100%;
z-index:99;
}


#site-content {
background:none repeat scroll 0 0 orange;
clear:both;
float:left;
height:500px;
margin:0 -9999em 0 0;
padding:2em 0;
position:relative;

}


.test-column{
	float:left;
	height:200px;
	margin:10px;
	width:200px;}

#footer {
background:none repeat scroll 0 0 red;
bottom:0;
height:2em;
left:0;
margin:auto;
position:fixed;
width:100%;
}

With the following html…

<div id="site-header">
		
		<h1><a href="http://dma:8888/">Architects</a></h1>
		<p>Just another WordPress weblog</p>
		
	</div><!--END.site-header-->	

<div id="site-content">

	

		<div class="post-1 post hentry category-uncategorized" id="post-1">
			
			
			<div class="test-column">
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
			</div>
			
			

			<p><a href="http://dma:8888/wp-content/uploads/2010/05/broomwood_05.jpg"><img class="alignnone size-full wp-image-7" title="broomwood_05" src="http://dma:8888/wp-content/uploads/2010/05/broomwood_05.jpg" alt="" width="750" height="500" /></a><a href="http://dma:8888/wp-content/uploads/2010/05/broomwood_07.jpg"><img class="alignnone size-full wp-image-9" title="broomwood_07" src="http://dma:8888/wp-content/uploads/2010/05/broomwood_07.jpg" alt="" width="738" height="500" /></a><a href="http://dma:8888/wp-content/uploads/2010/05/broomwood_03.jpg"><img class="alignnone size-full wp-image-5" title="broomwood_03" src="http://dma:8888/wp-content/uploads/2010/05/broomwood_03.jpg" alt="" width="750" height="500" /></a><a href="http://dma:8888/wp-content/uploads/2010/05/broomwood_05.jpg"><img class="alignnone size-full wp-image-7" title="broomwood_05" src="http://dma:8888/wp-content/uploads/2010/05/broomwood_05.jpg" alt="" width="750" height="500" /></a><a href="http://dma:8888/wp-content/uploads/2010/05/broomwood_07.jpg"><img class="alignnone size-full wp-image-9" title="broomwood_07" src="http://dma:8888/wp-content/uploads/2010/05/broomwood_07.jpg" alt="" width="738" height="500" /></a><a href="http://dma:8888/wp-content/uploads/2010/05/broomwood_03.jpg"><img class="alignnone size-full wp-image-5" title="broomwood_03" src="http://dma:8888/wp-content/uploads/2010/05/broomwood_03.jpg" alt="" width="750" height="500" /></a></p>
			
			
				<div class="test-column">
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
			</div>		
			
				
		</div>


	
</div><!--END.site-content-->

<div id="footer">
	
		<p>n Architects is proudly powered by <a href="http://wordpress.org/">WordPress 2.9.2</a> <a href="http://dma:8888/?feed=rss2">Entries (RSS)</a> <a href="http://dma:8888/?feed=comments-rss2">Comments (RSS)</a>. <!-- 13 queries. 0.281 seconds. --></p>
			
</div><!--END.footer-->	

With 2 classes inside site-content of test-column along with about 4500px of images, yet it gets to the last image and column and drops them below resulting in a downward scroll.

Are they not meant to be all lined up…

Or have i put it together wrong…?

Cheers :slight_smile: