SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hi,

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

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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-...-foothead2.htm

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

  4. #4
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Thanks guys

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

    I have the following css...
    Code 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..
    HTML Code:
    <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

  5. #5
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    **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...

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    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.

  7. #7
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Paul, thats worked a treat

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

  8. #8
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

    Code:
    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.
    I've put the images in a list now however, its back to dropping the final one..

    So i added
    Code CSS:
    #site-content li{float:left}
    but not luck still drops the last image...?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Did you float the ul as well?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    p.imagewrap{etc..}

  11. #11
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •