Question

I’ve been looking for a way to center a div with a set max-width. I assumed I could do so by giving the div a max-width of 90% and an auto margin, then use jQuery to find and set a fixed width, which I hoped, the auto margin would then center for me.

Something like the following.

JQuery:

$(function(){
    $wrap = $('#wrap');

    $wrap.width($wrap.width());
});

CSS:

#wrap {
    max-width:90%;
    margin:auto;
}

HTML:

<div id="wrap">
     <img src="http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-96.png" />
     <img src="http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-96.png" />
     <img src="http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-96.png" />
     <img src="http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-96.png" />
     <img src="http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-96.png" />
</div><!-- end div id="wrap" -->

So basically, I wanna make a wrapper div that I can jam full of images, but will not exceed 90% screen width; take wrapper and center it. Is this possible? I understand my JQuery thinking is almost certainly wrong. I’m very new to it, but I assumed that Javascript is the way to go about this.

Answer 1

In case anyone else is curious, I figured out a JQuery way to do what I wanted.

I have a bunch of uniformly sized images that I want in a scale-able div which also has a 90% max-width. Here’s what I came up with:

JQuery:

function divResize() {
var divWidth;
var extra;
divWidth = $(window).width() * .9;
extra  = divWidth % /*IMAGE SIZE IN PX*/;
divWidth = (divWidth - extra);
  $("#wrap").css({ width: divWidth });
}

$(document).ready(divResize);
$(window).resize(divResize);

CSS:

#wrap {
    margin:auto;
}

HTML:

<div id="wrap">
    <img src="/images.png" />
    <img src="/images.png" />
    <img src="/images.png" />
    <img src="/images.png" />
    <img src="/images.png" />
</div>

I guess my real problem was that I couldn’t adequately explain my problem. Thanks for the help everybody.