I have several divs with a width set to be 15% of their container. I would like these divs to expand to maintain that percentage width, as their container expands.

However I'd like them to shrink only up to a specified minimum width when their container shrinks. Meaning they shrink up to a point (until they reach n pixels) and then stop shrinking.

Any suggestions?

Thanks in advance.

EDIT: Just to clarify, when I say "their container shrinks" I'm talking about a container div set to 100% width of the body. So it shrinks when the browser is resized.

  • Eric

2 answers

o.k.w 2355
2
points

Something lile this should work:

CSS:

<style type="text/css">
  img.minWidth {display: none;} /* hide enforcing image by default */
</style>
<!--[if IE 6]>
<style type="text/css">
  /*  for IE6 to use image to enforce minimum width */
  img.minWidth {width: 100px; height: 0px; display: block;}
</style>
<![endif]-->

HTML:

<div id="container" style="width: 100%;">
  <div class="childDiv" style="width: 15%; min-width: 100px; ">content
  <img src="transparent.gif" class="minWidth" title="transparentImg" />
  </div>
  other coontent
</div>
Answered almost 7 years ago by o.k.w
  • Yikes! Transparent spacer gifs? Doug almost 7 years ago
  • Doesn't have to be transparent gif, it will not be displayed anyway. o.k.w almost 7 years ago
  • I realize that, and your technique will work perfectly. I just have to shake my head that spacer gifs are still being used in this decade! My personal preference is to keep the HTML as clean as possible (I also avoid empty clearing elements), but I fully admit that the CSS techniques I posted below are just as ugly. Pick your poison and hope that IE6 dies a rapid and painless death as soon as possible! Doug almost 7 years ago
Doug 1095
1
point

Two methods found in a quick Google search:

  • http://www.cssplay.co.uk/boxes/width.html
  • http://www.cameronmoll.com/archives/000892.html
Answered almost 7 years ago by Doug