Help | Site Map
Connecting Tech Pros Worldwide
 
 
LinkBack Thread Tools
  #1  
Old July 20th, 2005, 10:23 PM
David
Guest
 
Posts: n/a
Default simple fixed layout

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
  #2  
Old July 20th, 2005, 10:23 PM
Lauri Raittila
Guest
 
Posts: n/a
Default Re: simple fixed layout

In article David wrote:[color=blue]
> 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.[/color]

Why do you prefer that? It is usually much better if elements stack up.
[color=blue]
> Is there a way in CSS, other than absolutely positioning to get them
> to act in the same way as the table cells???[/color]

#container {display:table;}
#container * {display:table-cell;}
[color=blue]
> http://homepage.ntlworld.com/davidp.hopkins/cells.htm[/color]

#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.

  #3  
Old July 20th, 2005, 10:23 PM
David
Guest
 
Posts: n/a
Default Re: simple fixed layout

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
 

Bookmarks

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are Off
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over network members.
Post your question now . . .
It's fast and it's free

Popular Articles