Set width of ul containing floated li's

HTML & CSS
1

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:



  .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.



<!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>
2

HI,

Did you mean something like this:


<!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:auto;
	margin:100px;
}
.thumbs ul {
	float:left;
	margin:0 -32767px 0 0;/* browser limit */
	position:relative;
}
.thumbs ul li { display:inline; }
.thumbs ul li a {
	display:inline-block;
}
img{display:block;width:200px;height:200px;background:red;}/* for testing*/
</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>
3

Or something like this:


<!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:auto;
	margin:100px;
	position:relative;
}
.thumbs ul {
	position:relative;
	white-space:nowrap;
}
.thumbs ul li { display:inline; }
.thumbs ul li a {
	display:inline-block;
}
img{display:block;width:200px;height:200px;background:red;}/* for testing*/
</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>
4

Thanks Paul O’B,

float:left; is what I was looking for.