1

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

mskfisher
  • 3,291
  • 4
  • 35
  • 48
Niels
  • 353
  • 1
  • 6
  • 15

4 Answers4

1

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.

Micah
  • 1,221
  • 17
  • 42
Raspo
  • 1,048
  • 1
  • 7
  • 20
  • Sorry, IE6 doesn't support inline-block You could use the IE7.js (or IE8.js) plugin to let IE6 render that information correctly. you can find it here: http://code.google.com/p/ie7-js/ – Raspo Jan 24 '10 at 17:14
  • Hi Raspo, thanks for the feedback. I forgot to mention I have some 2 elements within the li that are absolutely positioned (one on top of the other). I'm still keen for a jquery solution but will resort to the IE8 plugin and accept the extra javascript library overhead :-) – Niels Jan 25 '10 at 02:04
0

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

Community
  • 1
  • 1
robertc
  • 74,533
  • 18
  • 193
  • 177
0

To get the width of any element use:

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

To set the width of any element use:

$('.selector').width( width );
Rowno
  • 3,325
  • 2
  • 23
  • 14
0

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

Raspo
  • 1,048
  • 1
  • 7
  • 20