teejnits
11-11-2010, 10:42 PM
I found:
http://codingforums.com/showthread.php?t=191990
from a previous thread...
The main question I have, how can I do this with mixed content. In this example (which is similar to what I've done before) the wrapper div has a defined width.
#image_box {
width: 2400px;
height: 122px;
}
In the case I am working with, the content is dynamic, so I can't define the width.
Is there any way to force content to start moving horizontally in a fixed height div? I've used float: left but that obviously stops once it hits the browser window's width. If not in CSS (I'm not being hopeful of a CSS solution), is there a JS trick that sets the width of the div dynamically based on the content? I know JS can calculate height dynamically based on content, but width it stops short, again, because of the browser.
So the basic structure is:
<div id="outer_div">
<div id="inner_div">
Dynamic content, imagine this is a lot that I would need a scroll bar in either direction. But of course I want it in the horizontal direction<img src="image_src.jpg" />
</div>
</div>
The basic CSS is:
#outer_div {
position: relative;
overflow: hidden;
height: 200px;
width: 960px;
}
#inner_div {
position: relative;
height: 200px;
}
So the #inner_div needs to have it's width calculated dynamically, of which it will exceed the width of the browser.
EDIT: I also need to clarify, that my scroll functionality is JS based... which is why I have the CSS as overflow: hidden. As I scroll I'll have JS tell the div to add the "left" property on the inner_div and go from 0 to -(width of inner_div - 960).
Any takers?
Thank you in advance for your help!
http://codingforums.com/showthread.php?t=191990
from a previous thread...
The main question I have, how can I do this with mixed content. In this example (which is similar to what I've done before) the wrapper div has a defined width.
#image_box {
width: 2400px;
height: 122px;
}
In the case I am working with, the content is dynamic, so I can't define the width.
Is there any way to force content to start moving horizontally in a fixed height div? I've used float: left but that obviously stops once it hits the browser window's width. If not in CSS (I'm not being hopeful of a CSS solution), is there a JS trick that sets the width of the div dynamically based on the content? I know JS can calculate height dynamically based on content, but width it stops short, again, because of the browser.
So the basic structure is:
<div id="outer_div">
<div id="inner_div">
Dynamic content, imagine this is a lot that I would need a scroll bar in either direction. But of course I want it in the horizontal direction<img src="image_src.jpg" />
</div>
</div>
The basic CSS is:
#outer_div {
position: relative;
overflow: hidden;
height: 200px;
width: 960px;
}
#inner_div {
position: relative;
height: 200px;
}
So the #inner_div needs to have it's width calculated dynamically, of which it will exceed the width of the browser.
EDIT: I also need to clarify, that my scroll functionality is JS based... which is why I have the CSS as overflow: hidden. As I scroll I'll have JS tell the div to add the "left" property on the inner_div and go from 0 to -(width of inner_div - 960).
Any takers?
Thank you in advance for your help!