ansaurus

Question

Making a div expand its width to fit fixed width content in IE 6 and 7

Answer 1

+1 A:

add "overflow:auto" to the parent div, so...

<div id="parentDiv" style="border: 1px #0000FF solid;padding:3px;overflow:auto;">  should make it work.

This way, you have the best solution CSS can offer. Now, as for your powerusers, use this bit of jquery to give the parent div the proper width, according to its child div.

Note that i give your divs a class so i can easily target them.

<body>
    <div class="parentDiv" style="border: 1px #0000FF solid;padding:3px;overflow:auto;">
      <p style="width:700px;">
        Lorem ipsum dolor sit amet, consectetur 
        adipiscing elit. Praesent varius mi a leo
        ultrices consequat. Nam id venenatis ligula. 
        Suspendisse et faucibus eros. Donec quis 
        augue eu nunc cursus blandit vel vel odio.
        Suspendisse rutrum aliquet massa, eu ultricies
        elit laoreet a. Curabitur feugiat cursus.
      </p>
    </div>
<script type="text/javascript">
$(function(){
   $('.parentDiv').each(function(){
      var newWidth = $(this).find('p:first').width();
      $(this).width(newWidth);
   });
});

</script>
  </body>

pixeline 2009-12-23 22:46:59

Scrollbars are not an option. I would like the div to stop shrinking at the right-hand edge of the fixed-width content.

jball 2009-12-23 22:48:42

then i guess you will need to fix the width of the parent div and since you don't know it in advance, you'll have to resort to javascript, to give the parent div's width the value of its child p width, plus padding and margin.

pixeline 2009-12-23 22:54:26

I really hope that's not the only solution. I can do that easily enough, but it really feels like a hack.

jball 2009-12-23 22:55:55

@pixeline, if you edit your answer to include the js width setting, I'll mark it as the accepted one. Your original answer missed the point my question by a bit, but I think you're right about js being the only solution.

jball 2009-12-29 17:26:22

done, using jquery.

pixeline 2009-12-29 18:07:03

Answer 2

A:

Consider using min-width:

<div style="border: 1px solid rgb(0, 0, 255); padding: 3px; min-width: 700px;">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent varius mi a leo ultrices consequat. Nam id venenatis ligula. Suspendisse et faucibus eros. Donec quis augue eu nunc cursus blandit vel vel odio. Suspendisse rutrum aliquet massa, eu ultricies elit laoreet a. Curabitur feugiat cursus. </p>
</div>

Min-width is not officially supported in IE-6, but there are lots of workarounds which you can find on Google.

Blakomen 2009-12-23 22:58:11

Unfortunately I have no idea what the width of the content inside will be, so I wouldn't know what to set min-width to.

jball 2009-12-23 23:11:37

ansaurus

tags:

views:

answers:

Making a div expand its width to fit fixed width content in IE 6 and 7

related questions