Display li horizontally with wide li elements <p>I'm trying to display a li element side by side so that I can turn it into a content slider. Because the li elements are so wide they will not display inline. I know that I can expand the ul width to the width needed however I need that to me a mask with over-flow hidden so that it will be a slider. </p> <p><a href="http://jsfiddle.net/deaYn/" rel="nofollow">Here's a fiddle</a> of my original code.</p> <p><strong>HTML:</strong></p> <pre><code>&lt;div class="slider"&gt; &lt;ul&gt; &lt;li&gt; &lt;div class="video"&gt;&lt;iframe src="http://player.vimeo.com/video/70965217?title=0&amp;amp;byline=0&amp;amp;portrait=0" width="692" height="389" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen&gt;&lt;/iframe&gt; &lt;/div&gt; &lt;div class="videotext"&gt; &lt;div class="videotexttitle"&gt; &lt;p&gt;Student Stories&lt;/p&gt; &lt;/div&gt; &lt;div class="videotextcopy"&gt; &lt;p&gt;At autsdf la veleniet lam fuga.Et modit quiae volesti onetumquib us est laut is aute ndant andia dolupti abor sectate aspernat dempor aut qui aut volorerchit, si officat emquissit eatem. At aut la veleniet lam fuga.Et modit quiae volesti onetumquib us est laut is aute ndant andia dolupti abor sectate aspernat dempor aut qui aut volorerchit, si officat emquissit eatem. &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="video"&gt;&lt;iframe src="http://player.vimeo.com/video/70965217?title=0&amp;amp;byline=0&amp;amp;portrait=0" width="692" height="389" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen&gt;&lt;/iframe&gt; &lt;/div&gt; &lt;div class="videotext"&gt; &lt;div class="videotexttitle"&gt; &lt;p&gt;Student Stories&lt;/p&gt; &lt;/div&gt; &lt;div class="videotextcopy"&gt; &lt;p&gt;At autsdf la veleniet lam fuga.Et modit quiae volesti onetumquib us est laut is aute ndant andia dolupti abor sectate aspernat dempor aut qui aut volorerchit, si officat emquissit eatem. At aut la veleniet lam fuga.Et modit quiae volesti onetumquib us est laut is aute ndant andia dolupti abor sectate aspernat dempor aut qui aut volorerchit, si officat emquissit eatem. &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/ul&gt; </code></pre> <p></p> <p><strong>CSS</strong></p> <pre><code>.slider { width: 1099px; height: 423px; overflow: visible; position: relative; /* for overflow: hidden to work in IE7 */ } .slider &gt; ul { position: relative; margin: 0; padding: 0; } .slider &gt; ul &gt; li { float: left; width: 1099px; height: 423px; } iframe.actvideo{ padding:16px; } .video{ float:left; background: url('images/videoround.png'); width:724px; height:423px; } .videotext{ float:right; width:301px; } </code></pre>