hi, im really pulling my hair out with this one. ive sat here for about 5+hours plus trying to figure it out and trial/error the possibilities. i have a central positioned page with a fixed width and i want to set a space in the middle for a gallery that horizontally scrolls. this is proving a big problem.
below is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Untitled Document body { background-color: #666; }
css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Untitled Document body { background-color: #666; }
and this is my css:
container {
height: 800px;
width: 950px;
margin: auto;
overflow: visible;
}
header {
background-image: url(images/header.gif);
height: 155px;
width: 950px;
}
main {
height: 417px;
overflow-x: scroll;
overflow-y: hidden;
width: auto;
background-color: #000;
float: left;
/* [disabled]white-space: nowrap; */
/* [disabled]overflow: scroll; */
}
footer {
background-image: url(images/footer.gif);
height: 128px;
width: 950px;
background-repeat: no-repeat;
clear: both;
} .text { font-family: "Arial Narrow", Futura-Book, sans-serif; font-size: 70%; width: 14px; } .pics { padding-left: 10px; float: left; padding-top: 10px; overflow-x: scroll; overflow-y: hidden; }
i am a newb and trying so hard to learn, but i really cant figure this out. i dont want a table. i can create a vertically scrolling box, but thats not what i want.
please all help very much appreciated
thanks
For one, you'll need to set the width of the #main container explicitly, otherwise it'll just expand with the content. Then you'll have to put an inner container around your images and set the width explicitly to something larger than the #main div.
main {
. . . width: 960px; . . . }
inner {
width: 3200px }
Of course you'd probably want to set the width of the inner div dynamically with Javascript in order to get a more exact measurement.
hi there, thanks for the reply.
i thought i have set a constrained width with my overall #container : 950px then by adding auto width to #main with an overflow-x of scroll should have done it. but yeh, it didnt. ill fiddle with your suggestion for a few hours, it didnt immediately work, but thatll be my fault. if all fails, i might conceed to a table. one persisting concern is that will all my attempts, i never see the dragging bit of the scroll bar. its fine on a touchpad but theres nothing to drag to see more content. any suggestions as to why this has disappeared?
thanks for your ideas
http://www.twelvestone.com/forum_thread/view/44859
we had a thread on this not long ago, in the end I used javascript to force the width.
A table was another good idea.
In the real end the design was scrapped and now my boxes wrap 
Unless you want to do it more complicated, you're still adviced to wrap your images in a div that serves as your scolling pane. Very basic :
body{ background-color:#666; } .header, .main, .footer{ width:950px; height:100px; margin:0 auto; background-color:#ccc; } .main{ height:500px; overflow:auto;
} .scrollit{ height:480px; width:2000px; background-color:#ccf; }
images in here
If the number of images and/or their size is dynamic, you'll need javascript to set the width on the wrapper accordingly, as stinky suggested.
K this may be messy in IE - haven't checked
CSS
wide{
overflow: auto;
overflow-y: hidden;
height: 200px;
min-width: 2000px;
}
HTML
looks too simple so maybe Im not understanding what you want. (I ut the width/height in the IMG tags just to see if it worked.