In article David wrote:
On this page I want to recreate table effect at the top of the page,
with CSS. The effect is to have several components in a row, and the
last cell in the row expand the width of the browser.
I have recreated the effect using a CSS float, but when the browser is
rezised he elements stack up, which I would prefer not to happen.
Why do you prefer that? It is usually much better if elements stack up.
Is there a way in CSS, other than absolutely positioning to get them
to act in the same way as the table cells???
#container {display:table;}
#container * {display:table-cell;}
http://homepage.ntlworld.com/davidp.hopkins/cells.htm
#container {min-width:<big-enaugh-number>px}
Neither works in IE.
http://www.svendtofte.com/code/max_width_in_ie/
This propably does also, but requires stupid empty div:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Test</title>
<style type="text/css">
#container .p1{float:left;width:100px;height:32px;
background:yellow;border: 1px solid blue}
#end {height:32px;background: #FF6835}
#foo {width:500px}
</style>
<div id="container">
<div id="foo"></div>
<div class="p1"></div>
<div class="p1"></div>
<div class="p1"></div>
<div class="p1"></div>
<div id="end"></div>
</div>
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
