5 Aug 2010 Kay   » (Journeyer)

CSS box model hacks

Consider that you want to display some DIV inside another DIV where the inner DIV always fills out the outer DIV completely:

<style type="text/javascript">
  #outer { width: 256px; height: 256px; }
  #inner { background: red; height: 100%; }
</style>
<div id="outer">
  <div id="inner"></div>
</div>

Width is already correct because the default value of auto keeps the inner DIV at maximum width. So only the height:100% style is needed for this scenario. But what if the inner DIV also has some padding or a border? Then the percent values will not work because according to the W3C box model the border and the padding is added to the width and height. So the inner DIV gets too large. In standard compliant browsers (Even in IE7) this can be solved pretty easy. IE6 needs a little hack. Read on...


Continue reading "CSS box model hacks"

Syndicated 2009-11-17 10:20:34 from K's cluttered loft

Latest blog entries     Older blog entries

New Advogato Features

New HTML Parser: The long-awaited libxml2 based HTML parser code is live. It needs further work but already handles most markup better than the original parser.

Keep up with the latest Advogato features by reading the Advogato status blog.

If you're a C programmer with some spare time, take a look at the mod_virgule project page and help us with one of the tasks on the ToDo list!