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

Something lile this should work:


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


<div id="container" style="width: 100%;">
  <div class="childDiv" style="width: 15%; min-width: 100px; ">content
  <img src="transparent.gif" class="minWidth" title="transparentImg" />
  other coontent
Answered over 9 years ago by o.k.w
  • Yikes! Transparent spacer gifs? Doug over 9 years ago
  • Doesn't have to be transparent gif, it will not be displayed anyway. o.k.w over 9 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 over 9 years ago
Doug 1095

Two methods found in a quick Google search:

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