javascript - CSS Floats On Same Line Variable Amount -

javascript - CSS Floats On Same Line Variable Amount -

i want have horizontal lists can run wide possible within fixed width container. using jquery allow scrolling on wide list, , overflow:automatic users without javascript.

i have code along lines of this:

<div class="list"> <ul> <li class="feed"> <section> <h1><span class="name">title</span></h1> <div class="scroll_left"><a class="ir" href="#">scroll back</a></div> <div class="article_list"> <ul class="article_list"> <li> <a href="article.php"> <div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div> <h2>title of article</h2> </a> </li> <li> <a href="article.php"> <div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div> <h2>title of article</h2> </a> </li> <li> <a href="article.php"> <div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div> <h2>title of article</h2> </a> </li> <!-- variable number of li's, 10s 100s --> </ul> </div> </section> </li> <!-- more of these lists --> </ul> </div>

i'll give subset of css think relevant:

.feed .article_list { position: relative; overflow: auto; float: left; width: 900px; } .feed .article_list ul { position: relative; width: 10000px; /** want wide, not allow scrolling past end*/ margin: 0; background-color: #ffffff; } .feed .article_list li { display: block; width: 130px; height: 150px; position: relative; float: left; border-right: 2px solid #b5e8f4; border-left: 2px solid #b5e8f4; margin: 0 5px 0 0; }

my javascript is:

$(document).ready(function() { $('div.article_list').css({ 'overflow' : 'hidden' }); $('.scroll_left a').click(function() { toscroll = $(this).parent().next(); toscroll.animate({scrollleft: "-=135"}); homecoming false; }); $('.scroll_right a').click(function() { toscroll = $(this).parent().prev(); toscroll.animate({scrollleft: "+=135"}); homecoming false; }); });

so is, either have create inner ul wide, users can scroll beyond list items, or can restrict if add together many items (dynamically, don't have lot of control), layout breaks.

can somehow scrollable area wide floated contents? or solution set width in javascript (less ideal, can that)?

its float: left on .feed .article_list don't want i've removed of them could.

i move inline setup instead of floating:

.feed .article_list { position: relative; overflow: auto; width: 100%; /* specify ever width want. think 100% proper. */ } .feed .article_list ul { position: relative; overflow-x: scroll; margin: 0; background-color: #ffffff; white-space: nowrap; }

by making overflow-x: scroll have permanent scroll bar (not totally necessary, can removed if prefer). white-space: nowrap maintain children on 1 line (instead of floating.)

.feed .article_list li { display: inline-block; // etc. etc. etc. ...

on children display: inline-block; allow specify height/width block element , maintain them inline @ same time.

jsfiddle:- http://jsfiddle.net/gbtcb/

update :-

in effort create cross-browser compatible create next changes: remove overflow: auto .feed .article_list , add:

.feed { overflow: hidden; } .article_list { overflow: auto;

from quirksmode.com:

http://www.quirksmode.org/css/whitespace.html : white-space: nowrap compatible ie7+. -

javascript html css layout css-float