Find the width of a left floated list and apply to wrapper div to center it using css - jQuery?

I wish to center a ul in a div that is the left column of a liquid layout. To do so I need to set the width of a div that I've used to wrap the ul. Note: the list items (and content) are retrieved from a database using php.

I'm interested in your suggestions on how to do this using jquery.

Consider the below markup:

<div id="wrapper">

   <div id="left-column">
     <div id="list-wrap">
       <ul>
        <li>Dynamic content 1</li>
        <li>Dynamic content 2</li>
        <li>Dynamic content 3</li>
        <li>Dynamic content 4</li>
       </ul>
      </div><!--/list-wrap-->
   </div><!--/left-column-->

   <div id="right-column">
     Content
   </div><!--/right-column-->

   <div style="clear: both;"></div>

   </div><!--/wrapper-->

Using this css:

#wrapper {}
#left-column { float: left; width: 50%; }
#right-column { float: right; width: 50%; }
#list-wrap { margin: 0 auto 0 auto; padding: 40px; }
#list-wrap ul { list-style-type: none; }
#list-wrap ul li { float: left: width 160px; height: 160px; margin: 20px; }

I'm not too clever when it comes to javascript but I'm thinking the solution would entail something like this:

1. Find the width of the usable content area of #left-column.
2. Work out how many li's would fit into that width (taking into account the margin and padding of #list-wrap).
3. Round off the figure to nearest 200px (160px width + 2x20px margins)?
4. Apply the width to #list-wrap.

Here is some开发者_C百科thing I have used before that meets SOME of the criteria to get started:

   var menuWidth = 0;
   $(".menu > ul > li > a").each(function(i) {
     menuWidth += $(this).outerWidth(true);
     });
    $(".menu").css("width", menuWidth);

Thanks in advance for your help,

Niels

You dont need js to do a css job!

consider this style:

#wrapper {}
#left-column { float: left; width: 50%; }
#right-column { float: right; width: 50%; }
#list-wrap { margin: 0 auto 0 auto; padding: 40px; }
#list-wrap ul { list-style-type: none; text-align: center; }
#list-wrap ul li { width: 160px; height: 160px; margin: 20px; display: inline-block; }

Get rid of float: left; for the li items and add a display: inline-block;

Finally, add text-align: center; to the UL to make them centered

I hope this is what you were lookin for.

The jQuery width function returns the usable area already. With that, what I think you're trying to do is fairly straightforward:

var ulWidth = $("#list-wrap ul li").width();
$("#list-wrap").width(Math.floor(($("#left-column").width() - 80) / ulWidth) * ulWidth);

If you want to be generic and calculate the relevant padding and border too, see the question "Total width of element (including padding and border) in jQuery."

To get the width of any element use:

var width = $('.selector').width();

To set the width of any element use:

$('.selector').width( width );

Jquery solution:

this is not the best way to write your code, I did it this way to give you the idea:

$(function() {
    var availableWidth = $("#list-wrap").width();
    var liWidth = $("#list-wrap ul li").outerWidth(true);
    var numberOfListItem = parseInt(availableWidth/liWidth);
    var newWidth = numberOfListItem*liWidth;
    $("#list-wrap").width(newWidth);
});

note: in the css add a margin: 0; padding: 0; to the ul

you can view it here: http://jsbin.com/uxaho/3/edit