...

View Full Version : overflow-x:scroll with div children



ricmetal
06-30-2011, 09:50 PM
hi
im trying to get a div that is set to scoll on the x axis when it's content is wider than it's width. problem ocurrs when i try to place divs inside the scrollable parent.



<div style="width:100px;overflow-x:scroll;white-space:nowrap;">
<div style="float:left;">dlsjgklfsgkjdfjgkjkldfsjkgljfkldjglkjdflksjglkfdjklgjlksdfjglkjdlkfjgklfdjlksg</div>
<div style="float:left;">dlsjgklfsgkjdfjgkjkldfsjkgljfkldjglkjdflksjglkfdjklgjlksdfjglkjdlkfjgklfdjlksg</div>
<div style="float:left;">dlsjgklfsgkjdfjgkjkldfsjkgljfkldjglkjdflksjglkfdjklgjlksdfjglkjdlkfjgklfdjlksg</div>
<div style="float:left;">dlsjgklfsgkjdfjgkjkldfsjkgljfkldjglkjdflksjglkfdjklgjlksdfjglkjdlkfjgklfdjlksg</div>
<div style="float:left;">dlsjgklfsgkjdfjgkjkldfsjkgljfkldjglkjdflksjglkfdjklgjlksdfjglkjdlkfjgklfdjlksg</div>
<div style="float:left;">dlsjgklfsgkjdfjgkjkldfsjkgljfkldjglkjdflksjglkfdjklgjlksdfjglkjdlkfjgklfdjlksg</div>


problem is that the divs don't stay on the same line, and the scrolling of the parent div won't occur on the x axis.
does anyone know if there's a way to achieve this?

Rowsdower!
06-30-2011, 10:03 PM
Try setting the inner div elements to display:inline; while removing the float:left; from each of them and see if that works for you.

That should put them all on one line, but then you'll need to space them out and worry about any possible line-height issues, etc.

ricmetal
06-30-2011, 10:18 PM
awesome.
thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum