Make container div expand to size of inner contents using table-cell display

时间:2015-10-30 21:28:32

标签: html css

Seems like this is a pretty standard problem: I need a container div element to expand horizontally according to the width property of the inner fieldset. Everything I've found so far offers two solutions.

First solution is to use display:inline-block. However, I'm using display:table-cell to position the container so this won't work.

The second is to add a min-width to the container div. This does solve the issue, however the width of the inner fieldset will not be static, so while it looks fine when there's a lot of content in the fieldset it looks awkward otherwise (there is a huge gap between this particular div and the one to it's right).

Is there another way to force the container div to automatically resize, based on inner content, without using the two solutions above?

Fiddle: http://jsfiddle.net/mj3h1682/

EDIT

Added the following script to the page. Would like a method using css, however if anyone knows of one.

<script type="text/javascript">
    $(document).ready(function() {
        var width = $('#Profile').outerWidth() + 20;
        $('#partialColumn1').css('min-width', width);
    });
</script>

0 个答案:

没有答案