SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    liquid scrolling horizontal CSS div

    Hi,

    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.

    The div is a bit like this:

    Code:
    <div style="width: 400px; height: 190px; overflow-x: scroll; overflow-y: hidden; padding: 5px;"><img src="image 1 here" /><img src="image 2 here" "etc." "etc." /></div>
    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.

    Thanks a lot.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Use inline-block and white-space:nowrap:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .test {
    	margin: auto;
    	padding:0;
    	list-style:none;
    	text-align: left;
    	height: 215px;
    	white-space: nowrap;
    	overflow:scroll;
    	overflow-x: scroll;
    	overflow-y: hidden;
    	position:relative;
    	width:100%;/* ie6 needs this*/
    }
    .test li {
    	width: 210px;
    	height:180px;
    	margin: 10px 10px 10px 0;
    	background:red;/* for testing */
    	display: inline-block;
    	position:relative;
    }
    .test li a{display:block}
    * html .test li {display:inline}/* ie6 inline -block fix*/
    *+html .test li {display:inline}/* ie7 inline -block fix*/
    </style>
    </head>
    <body>
    <ul class="test">
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    </ul>
    </body>
    </html>
    Or non-semantically as per your example:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .test {
    	margin: auto;
    	text-align: left;
    	height: 215px;
    	white-space: nowrap;
    	overflow-x: scroll;
    	overflow-y: hidden;
    	width:100%;
    }
    .test img {
    	width: 210px;
    	height:180px;
    	margin-right: 10px;
    	background:red;/* for testing */
    	display: inline-block;
    	margin: 10px 10px 10px 0;
    }
    
    </style>
    </head>
    <body>
    <div class="test"><img src="image 1 here" /> <img src="image 2 here" /> <img src="image 3 here" /> <img src="image 4 here" /> <img src="image 5 here" /> <img src="image 6 here" /></div>
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    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.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .test {
    	margin: auto;
    	padding:0;
    	list-style:none;
    	text-align: left;
    	height: 215px;
    	white-space: nowrap;
    	overflow:scroll;
    	overflow-x: scroll;
    	overflow-y: hidden;
    	position:relative;
    	width:100%;/* ie6 needs this*/
    }
    .test li {
    	width: 210px;
    	height:180px;
    	margin: 10px 10px 10px 0;
    	background:red;/* for testing */
    	display: inline-block;
    	position:relative;
    }
    .test li a{display:block}
    * html .test li {display:inline}/* ie6 inline -block fix*/
    *+html .test li {display:inline}/* ie7 inline -block fix*/
    
    table{width:100%;table-layout:fixed}
    </style>
    </head>
    <body>
    <table><tr><td>
    <ul class="test">
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    	<li><a href="#"><img src="image  here" /></a></li>
    </ul>
    </td></tr></table>
    </body>
    </html>

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    name: company name

    Than

    name:. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .company name

    (. . . . = space )

    Is that the right way to do it And thank you again, Paul. That worked a treat. Really appreciate it.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes that should work

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul. Appreciate your help here. That first css scroller you did is brilliant. Well done.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •