? HTML: horizontal scroll bar in AP Div

[lupedelupe]

Hi,

I know next to nothing about HTML, so please bear with me. Trying to set up an AP Div which needs to contain a series of photographs. Working with Dreamweaver, which automatically assumes that I want to stack the content vertically.

Am currently running with:
#apDiv1 {
position:absolute;
width:880px;
height:520px;
z-index:1;
left: 10px;
top: 10px;
background-color: #FFFFFF;
overflow-x: scroll;
overflow-y: hide;
}

But I still get a vertical scroll bar...
Any help hugely appreciated.

 

[alphabyte]

Try "overflow-y:hidden" (hidden, instead of hide).

 

[lupedelupe]

hidden... of course!

That fixed the problem with the vertical scroll bar appearing, but now only the horizontal scroll-bar BASE shows, but no handle... so cannot scroll at all. Dreamweaver stacks the images vertically (or expands the div vertically) (?)

 

[alphabyte]

Okay, let's see if we can explain this so that it makes sense: apparently the width of your photo's are less than the width of the containing div, i.e. less than 880 px. For example, let's say you have four photos of 200px each (and no space between them) then they take up 800 px, and they fit happily into your div; but there's not enough space for the next photo, so it pushes down to the next line, and no horizontal scrolling is required.

How to fix this: make an additional inner div and specify its width to something wider than 880px, let's say 2000px. The inner div contains the photos and will display them on one row up to 2000px wide, but the outer div which is the one that we see on the screen is only 880px wide, so it gets a scroll bar.

Your css is now as follows:
#apDiv1 {
position:absolute;
width:400px;
height:320px;
z-index:1;
left: 10px;
top: 10px;
background-color: #FFFFFF;
overflow-y:hidden;
overflow-x:scroll;
}
#apDiv2 {
width:2000px;
}

And the html is:

<div id="apDiv1">
<div id="apDiv2">

<img src='images/pic1.gif' width='200' height='60'>
<img src='images/pic2.gif' width='200' height='60'>
<img src='images/pic3.gif' width='200' height='60'>
<img src='images/pic4.gif' width='200' height='60'>
<img src='images/pic5.gif' width='200' height='60'>

<!--apDiv2--></div>
<!--/apDiv1--></div>


Viola!

 

[lupedelupe]

Spot on!
Thanks so much for your help mate.

 

[alphabyte]

You're welcome; glad I could help.