homepage Welcome to WebmasterWorld Guest from 23.20.61.85
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Need horizontal scrollable div
andrewsmd

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4353252 posted 8:44 pm on Aug 18, 2011 (gmt 0)

I need a div that stays at 95% width and is scrollable horizontally. What I have inside of them is a lot of divs that are generated via code. The problem I'm having is that when they get too wide, they go to the next line. I want a horizontal scroll bar to show. Here is the html

<div id="header">

<br>

<div class="headerImageRepeat">
content here
</div>
<div class="headerImageRepeat">
content here
</div>
<div class="headerImageRepeat">
content here
</div>
<div class="headerImageRepeat">
content here
</div>
<div class="headerImageRepeat">
content here
</div>
<div class="headerImageRepeat">
content here
</div>
<div class="headerImageRepeat">
content here
</div> <!-- etc... -->
</div>

and here is my css
#header{
margin-left: auto;
margin-right: auto;
width: 95%;
text-align: left;
height: 124px;
white-space: nowrap;
overflow-x: auto;
}

.headerImageRepeat{
width: 210px;
height: 83px;
margin-right: 10px;
background-image: url('../images/userBg.png');
background-repeat: no-repeat;
float: left;
display: inline;

}

 

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4353252 posted 10:46 pm on Aug 18, 2011 (gmt 0)

Do you want a plain html scrollbar or do you need it to scroll via javascript?

Either way, it comes down to two nested divs.

The outer div has the visible width you want-- here 95%-- and a forced height based on what's going on in the inner one.

The inner div has a forced width-- presumably wider than 95%, which is why you need or want the scroll. Either ems or pixels will do. Its height can be forced, or it can be determined by its content if you have something with fixed measurements, like images.

Both divs are exactly the same height, allowing for padding and margins, so the user doesn't know there are two.

The individual pieces within the inner div are set to {display: inline-block;} so they march along nicely one after the other. That part is easy. You can practice with colored boxes or similar to get the structure right.

The javascript version has {overflow: hidden;} for the outer div, with a tiny bit of code to handle the scrolling. The plain html version has {overflow: auto;} which will give you a default scrollbar. Not all scrollbars are exactly the same, so allow a few spare pixels in the height. You don't want it to spit out a vertical scrollbar at the side. Yuk.

If you go the javascript route and you want the controls to be at the ends rather than above or below, you will need to add a third div to contain the whole package. But work out the scrolling part first.

Paul_o_b

10+ Year Member



 
Msg#: 4353252 posted 10:00 am on Aug 19, 2011 (gmt 0)

You can do it quite simply by removing the float and using display:inline block instead.

This will allow the white-space:nowrap to work and the row will not wrap. No need for any extra divs at all.:)


#header {
margin: auto;
width: 95%;
text-align: left;
height: 124px;
white-space: nowrap;
overflow-x: auto;
}
.headerImageRepeat {
width: 210px;
height: 83px;
margin-right: 10px;
background:red url('../images/userBg.png') no-repeat;
display: inline-block;
}
* html .headerImageRepeat{display:inline}/* ie6 inline -block fix*/
*+html .headerImageRepeat{display:inline}/* ie7 inline -block fix*/




I would probably have used a list structure instead of multiple divs and then targeted the list element without the need for all those same classes on every element.

andrewsmd

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4353252 posted 2:02 pm on Aug 19, 2011 (gmt 0)

Display inline-block worked. I knew there had to be a way without setting the width to do it. These things are in an asp repeater so setting a class wasn't that tough. There's always more than one way to skin a cat.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved