Hi all

I have a demo here - http://www.ttmt.org.uk/forum/thumbs/

It's just a floated <li> list containing images.

The containing div has a percentage width with overflow:hidden

To allow the <li>'s to float left, the <ul> has a width wider than the width of all the images.

Is it possible to set the width of the <ul> so it exactly the width of it's contents.

Something like:

Code:
  
  .thumbs ul{
    width:100%;
  }
I'm try to create a thumbnail carousel and I need the <ul> to be the width of the it's contents.

Code:
  
<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <title>Title of the document</title>
  
  
  <style type="text/css" >
    *{
      margin:0;
      padding:0;
    }
    body{
    	background:#eee;
    }
    .thumbs{
    	width:80%;
    	overflow:hidden;
    	margin:100px;
    }
    .thumbs ul{
    	width:4000px;
    	position:relative;
    }
    .thumbs ul li{
    	display:inline;
    }
    .thumbs ul li a{
    	display:inline-block;
    	float:left;
    }
  </style>
    
  </head>
  
<body>
  
    <div class="thumbs">
      <ul>
        <li><a href="#"><img alt="" src="images/01.jpg" /></a></li>
        <li><a href="#"><img alt="" src="images/02.jpg" /></a></li>
        <li><a href="#"><img alt="" src="images/03.jpg" /></a></li>
        <li><a href="#"><img alt="" src="images/04.jpg" /></a></li>
        <li><a href="#"><img alt="" src="images/05.jpg" /></a></li>
        <li><a href="#"><img alt="" src="images/06.jpg" /></a></li>
        <li><a href="#"><img alt="" src="images/07.jpg" /></a></li>
        <li><a href="#"><img alt="" src="images/08.jpg" /></a></li>
        <li><a href="#"><img alt="" src="images/09.jpg" /></a></li>
        <li><a href="#"><img alt="" src="images/10.jpg" /></a></li>
      </ul>
    </div>
      
</body>

</html>

<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <title>Title of the document</title>
  
  
  <style type="text/css" >
    *{
      margin:0;
      padding:0;
    }
    body{
    	background:#eee;
    }
    .thumbs{
    	width:80%;
    	overflow:hidden;
    	margin:100px;
    }
    .thumbs ul{
    	width:4000px;
    	position:relative;
    }
    .thumbs ul li{
    	display:inline;
    }
    .thumbs ul li a{
    	display:inline-block;
    	float:left;
    }
  </style>
    
  </head>
  
<body>
  
    <div class="thumbs">
      <ul>
        <li><a href="#"><img alt="" src="images/01.jpg" /></a></li>
        <li><a href="#"><img alt="" src="images/02.jpg" /></a></li>
        <li><a href="#"><img alt="" src="images/03.jpg" /></a></li>
        <li><a href="#"><img alt="" src="images/04.jpg" /></a></li>
        <li><a href="#"><img alt="" src="images/05.jpg" /></a></li>
        <li><a href="#"><img alt="" src="images/06.jpg" /></a></li>
        <li><a href="#"><img alt="" src="images/07.jpg" /></a></li>
        <li><a href="#"><img alt="" src="images/08.jpg" /></a></li>
        <li><a href="#"><img alt="" src="images/09.jpg" /></a></li>
        <li><a href="#"><img alt="" src="images/10.jpg" /></a></li>
      </ul>
    </div>
      
</body>

</html>