[CSS basic box model] Proposal: new value for the clear property

I suggest to add a value "inside" (or whatever better keyword) to the clear property. clear:inside will be applied to the containing element of the floating blocks, rather than to the following element.

Use case 1: A box with images inside, with a background color and a border around the box.

<div class="imagebox">
  <img src="img1.jpg" alt="">
  <img src="img2.jpg" alt="">
  ...
</div>

.imagebox {
  border:2px solid red;
  background:yellow;
  clear:inside;
}
.imagebox img {
  float:left;
  margin:10px;
}

Without clear:inside I need to add a clearing element such as <div style="clear:left"> as the last element of the box, which is ok as a workaround, but not as a concept.

Use case 2: A horizontal navigation with a background.

<ul id="mainNavi">
  <li><a href="page1.html">Page 1</a></li>
  <li><a href="page2.html">Page 2</a></li>
  ...
</ul>

#mainNavi {
  background:red;
  list-style:none;
  clear:inside;
}
#mainNavi li {
  display:block;
  float:left;
  margin:0.2em;
  background:yellow;
}

Without clear:inside I need to wrap the ul element inside a div with the background color, and add a clearing element (or maybe apply some display:table-* trickery, which is unintuitive too).
-- 
GMX.ch - Schweizer FreeMail-Dienst mit über 800.000 Mitgliedern
E-Mail & mehr! Kostenlos: http://portal.gmx.net/de/go/chfreemail

Received on Sunday, 6 June 2010 19:58:59 UTC