Reading through a backlog of posts, I came across this and thought I'd throw in $0.02.
In a nutshell: All list items have equal width and fill the container horizontally. But the container is of flexible width. And each li has 0.5em padding....And has a 1px border.
Now, with the subtractive box-model, this would be achived simply: There's 6 items, so set the width to 16.6%, add a 1px border which is subtracted from 16.6%, then the 0.5em of padding.
If you need a subtractive model and don't mind empty semantics, then the technique is not terribly difficult:
<style>
li { display:block; float:left; width:16.6%; margin:0; padding:0; border:none; }
li div { border:1px solid #333; padding:0.5em; }
</style>
<ul>
<li><div>foo</div></li>
<li><div>bar</div></li>
<li><div>baz</div></li>
<li><div>fred</div></li>
<li><div>barney</div></li>
<li><div>clyde</div></li>
</ul>
Of course, if these are links then you can style the a element and get rid of the divs.
You could do something like this: <http://dev.l-c-n.com/disp-table/equal-H-nav.php>
Internet Explorer doesn't support "display: table-cell;"
Can someone remind me why we use the additive box-model? It seems stupid to me, there's no real advantage.
The additive model is useful when laying out a page -- the page is a container and you need to fit things in it and you need to carefully describe how much space each thing takes.
The subtractive model is useful when styling content elements independent of the page -- the element is important and you need to carefully describe how much space it needs.
Most of our problems come from being in between these needs. For example, you have a right column, taking 300px of the page, with a 2px left border, and 19px left and right padding. You have an img that is 260px wide in the column.
Now, the client wants to get rid of the border and increase the padding. If you think that either model would allow you to just change the border and padding, you'd be wrong.
Additive model: does the column still fit on the right side? Not without some fancy math and possibly resizing all the content of both columns.
Subtractive model: does the image still fit inside the column? Not without some fancy math and possibly resizing all the content of both columns.
The W3C is avowedly content-oriented and not page-layout oriented. This is why we have flow instead of a grid, and additive instead of subtractive models.
--
Ben Curtis : webwright
bivia : a personal web studio
http://www.bivia.com
v: (818) 507-6613****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
