www.webdeveloper.com
Results 1 to 4 of 4

Thread: Set width of ul containing floated li's

  1. #1
    Join Date
    Feb 2009
    Posts
    124

    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
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,126
    I've always had to use JavaScript to simply loop through all the elements and add their widths together then set it to the parent element. Here's a basic example:
    http://jsfiddle.net/ZfSHJ/
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Jul 2009
    Posts
    32
    Im not really sure what the question is, or what your trying to achieve. but yes you can. try width:auto

  4. #4
    Join Date
    Feb 2009
    Posts
    124
    Sabz, I wanted the <ul> to be the width of it's contents no wider.

    width:auto didn't work.

    float:left; did

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles