Just a simple (I think) little CSS thing here, but I can’t figure it.
I’m using WordPress as a CMS and I’ve got a two column layout. In the main/left column I want to put a horizontal scrolling CSS div box for scrolling images. Now, the thing is, I don’t want to fix the width of the scrolling div because the layout of the theme is pretty liquid.
If I make the width 100%, then the whole theme cracks because the images just push beyond the column the div is in and scrolling functionality vanishes. If I make the width a fixed width, like, for example, in the code above, then it’s going to be fine for my resolution and not for anyone elses. How can I make the div “liquidly” fill the column’s width but still retain scrolling functionality when images overflow horizontally? Would really appreciate some of your thoughts.
Hi, Paul. Thanks a lot. I really appreciate your time. It works perfectly. The first one is great. Excellent stuff. A thing of beauty. It fills the width of the column perfectly. The only thing that is a bit of a problem though is that when it is placed in a table, it seems to forget itself :). When I put it outside of a table, it works perfectly (in all IEs as well – and thanks, I really appreciate that attention to detail), but when it’s put inside a table, it stops working. Is there any way to force the table to play ball or force it to play ball with a table?
I thought that maybe the problem was to do with WordPress and I gave everything !importants thinking it was that. But when I just put it in a plain vanilla static html document and tested it locally, it does the same thing. Outside of a table, works perfectly. Fills the column perfectly. Inside a table, it gives problems.
I have to ask why you feel the need for a table as it is not tabular data as such and therefore the table structure is redundant for this example?
If you are already committed to tables then you would need the table-layout:fixed algorithm in order to stop the table from expanding. Otherwise tables will do as they always do and stretch to accommodate the unbroken content.
Here is an example wrapped in a table using table-layout:fixed.
That is working perfectly. Thank you. I’m doing a bit of tweaking on it and I’ll tell you why and also why I’m using a table here.
I’m doing a directory type site with listings of companies. The table has the company’s data. Along the lines of:
<td>Name</td><td>Blue Widget Manufacturing</td>
<td>Address</td><td>123 Any Road, Anywhere</td>
<td>Images</td><td>[your excellent div scroller]</td>
That’s where the image scroller fits into the table. Doing it with a fixed layout like that worked perfectly. The scroller fits nicely into that cell. Obviously though, the two table columns fill 50% each of the content column. So what I’ve done is given the first <td> on the left a width of 10% and that seems to have done the trick, so it’s more like