auto center floated elements

[Historical Forums User]

Hi guys,

I am stuck with a float and center problem. I have a div with min and max width, inside this div are images that are floated left, what I would like to do is to auto center this images according to browser width. That means that inner space between images should be auto calculated. How can I do this?

html code:

css code:

#content {

min-width: 250px;

max-width: 1420px;

height: auto;

padding-top: 50px;

margin-left: auto;

margin-right: auto;

overflow: auto;

}



#content img {

float: left;

padding-top: 10px;

padding-bottom: 10px;

margin: 0 auto; /* this doesn't work */

/* I have also tried with "text-align: center;" */

}

Any help would be appreciated. Thanks

[Senff]

Any particular reason why the images are floated in the first place? Cause that is kinda counterproductive if you don’t want it to float to the left in the first place…?

[jamygolden]

http://jsfiddle.net/jamygolden/Pn3kg/

It’s because your max-width is too wide. You are centering something that is 1420px wide. So keeping in mind that websites are rarely even 1420px wide, that means you’ll never see it move.

If you’re trying to center the items floated to the left, do this instead: http://jsfiddle.net/jamygolden/Pn3kg/1/ (this doesn’t work in IE7 )

[Historical Forums User]

Hi guys, thanks for both replies but unfortunately that doesn’t do what I have in mind. With this code I have fixed right margin 5px – this should be auto generated: for example if I have browser width 1420px with elements that have 250px width it means that there will be 5 elements in line with 42.5px margin on right, but if I have browser width 900px there will be only 3 elements in line with 75px margin on the right (except last element). Float center would be excellent solution. :) I think that without JQuery this won`t be possible to solve.

Ales

[wolfcry911]

don’t float the images. Just apply text-align: center to the #container and you’re done. The only problem with this solution is that the last row of images (assume it contains fewer images) will be centered instead of left aligned.

[joshuanhibbert]

I’m not entirely sure what you are after, but would something along these lines suffice? http://jsfiddle.net/joshnh/8KGBQ/

[Author]

Posts