div width relative to content

Question

Hi,

Is there a way to dynamically set a div width / make the width relative to the content - using jQuery? It has to be with a numerical value because otherwise, it doesn't work with the horizontal website layout I'm dealing with...

The div will only contains images with a defined width values.

Thanks.

Answer 1

a div will stretch to fit its container (however wide it may be) by default if it doesn't have a width explicitly set.

set the div to have display:inline-block; and it will stretch to fit its contents, which is what you seem to want.

see example here: http://jsbin.com/usuno4

Answer 2

Div widths are 100% of the containing element, unless you have styles affecting the div or the div is inside a inline element.

--

Can you give any more information on what exactly you're trying to accomplish. The question is a quick answer, but I believe you're looking for more.

Answer 3

This is the solution I was looking for :

<script type="text/javascript">
var width = 0;
$('#page img').each(function() {
    width += $(this).outerWidth( true );
});
$('#page').css('width', width + 0);
</script>