div overflow will not scroll horizontally?

Question

i am trying to make a div overflow scroll horizontally rather than vertically, but for some reason even if i try overflow-x:scroll it only ever scrolls vertically.

can someone please show me where im going wrong, thanks

<div class="profile_photos_area">
 <?php include('includes/mod_profile/mod_photos/photos.php'); ?>
</div>

photos.php:

<?php
$profile_bits = get_profile_bits();
while ($profile = mysql_fetch_array($profile_bits)) { 
$dirname = "./data/photos/".$profile_id."/";
$images = scandir($dirname);
$ignore = Array("_cover.jpg", "_default.jpg", "_starlight.jpg", "_starlight_thumb.jpg", "thumb_pic1.jpg", "thumb_pic2.jpg", "thumb_pic3.jpg", "thumb_pic4.jpg", "thumb_pic5.jpg", "thumb_pic6.jpg", "thumb_pic7.jpg", "thumb_pic8.jpg", "thumb_pic9.jpg", "thumb_pic10.jpg", "thumb_pic11.jpg", "thumb_pic12.jpg", "thumb_pic13.jpg", "thumb_pic14.jpg", "thumb_pic15.jpg", "thumb_pic16.jpg");
foreach($images as $curimg){
if(!in_array($curimg, $ignore) && preg_match("/\.jpg$/i", $curimg)) {
echo "<a href=\"".$dirname.$curimg."\" rel=\"shadowbox\" title=\"<strong>{$profile['display_name']}'s Photo's</strong>\"><img src='".$dirname.$curimg."' class=\"profile_photos\" width=\"170\" height=\"150\" ></a>";
};
} 
}
?>

css:

.profile_photos_area{
    width:82%;
    height:92px;
    margin-right:16px;
    margin-top:50px;
    position:absolute;
    float:left;
    text-align:left;
    padding-left:18px;
    padding-top:10px;
    -ms-overflow-x: scroll; /* IE8 */
    overflow-x: scroll;
    display:inline-block;


}

in this case, we do not need your PHP code as it isn't a PHP question. Please post the output generated by your PHP, as HTML — Samuel Liew
– Samuel Liew, Commented Apr 19, 2013 at 5:14

Jace · Accepted Answer · 2013-04-19 05:39:16Z

If the containing div has a set width (which yours does) then that's as wide as it's going to go and overflowing text will wrap.

What you need to use is white-space:nowrap to stop the wrap, then set up your overflows correctly:

Fiddle:
http://jsfiddle.net/PwVS3/4/

.profile_photos_area{
    width:82%;
    height:92px;
    margin-right:16px;
    margin-top:50px;
    position:absolute;
    float:left;
    text-align:left;
    padding-left:18px;
    padding-top:10px;
    display:inline-block;

    /* relevant stuff */
    -ms-overflow-x: auto; /* IE8 */
    overflow-x: auto;
    -ms-overflow-y: hidden; /* IE8 */
    overflow-y: hidden;
    white-space:nowrap;
}

This solution will work with any number of photos you wish to use in your photo area. However, you will need to take care of line breaks yourself, but this may not be applicable in your case.

On a side note, overflow:auto will not show a scroll-bar unless the content overflows. Whereas overflow:scroll will show a scroll-bar regardless of whether or not there is overflowing content. Choose whatever you need.

Dolo · Accepted Answer · 2013-04-19 05:26:07Z

0

http://jsfiddle.net/dolours/CQ8YN/ Modify your html like this is

.inner
{
    width:200%;
}
.profile_photos_area{
    width:100%;
    height:150px;
    margin-right:16px;
    margin-top:50px;
    position:absolute;
    float:left;
    text-align:left;
    padding-left:18px;
    padding-top:10px;
    -ms-overflow-x: scroll; /* IE8 */
    overflow-x: scroll;
    display:inline-block;


}

I hope this solve your problem

answered Apr 19, 2013 at 5:26

Dolo

9761 gold badge14 silver badges28 bronze badges

1 Comment

Jace Over a year ago

Note, this will restrict the width of the inner content by whatever it's defined width is. The rest of the content will then wrap underneath it. jsfiddle.net/CQ8YN/1

Collectives™ on Stack Overflow

div overflow will not scroll horizontally?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related