Home/ Questions/Q 515655
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T07:39:01+00:00

I need a div with a border to wrap around arbitrarily sized fixed-width content

  • 0

I need a div with a border to wrap around arbitrarily sized fixed-width content (this means I do not know what that fixed width will be, it changes from page to page).

The below html does what I’d expect in IE 6, that is, if you size the browser window down to less than the width of the content (in this case a fixed-width <p>, but it could be any fixed width content), the div with the border stops shrinking at the right-hand edge of the content. However, in IE 7 (and FF), the border continues to shrink down to stay within the browser window’s width, going behind and showing through the content.

Is there a way to make the div shrink and grow with the browser window, but never have a width less than the content?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

  <head>
    <title>Border Test</title>
  </head>

  <body>
    <div style="border: 1px #0000FF solid;padding:3px;">
      <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>
  </body>
</html>

Update: I did some poking around in IE 8, and display:table in the <div> style declaration fixes it there.

<div style="border: 1px #0000FF solid;padding:3px;display:table;">

Is there any way to simulate display:table in IE 7?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0