SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Set width of ul containing floated li's

    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>

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

    Did you mean something like this:

    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: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. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Or something like this:

    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: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. #4
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B,

    float:left; is what I was looking for.


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
  •