By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,198 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

simple fixed layout

P: n/a
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.

Is there a way in CSS, other than absolutely positioning to get them
to act in the same way as the table cells???

http://homepage.ntlworld.com/davidp.hopkins/cells.htm
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
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.

Jul 20 '05 #2

P: n/a
Used a hack from http://www.svendtofte.com/code/max_width_in_ie/ to
set a min-width to give the desired effect in everything except Opera!

http://homepage.ntlworld.com/davidp.hopkins/cells.htm
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.