[thelist] Advanced Table Design using only Divs and CSS.

[ben morrison]

I was going to suggest adding a spacer gif with the minwidth as its  
width,

but came across another hack using a nested div with the width applied  
(not tested):

#content {
   border: 2px solid #00f;
   min-width: 500px;
}
.minwidth {
   width: 500px;
}

<div id="content">
   <div class="minwidth"></div>
</div>

taken from:
http://www.webmasterworld.com/forum21/7113.htm

benjer

On 9 Aug 2004, at 20:35, Robert Hansson wrote:

> Hi everyone out there!
>
>
>
> There have been a lot of questions about how to create html layout
> without using tables. I have another question different from the other
> ones.
>
>
>
> Background:
>
>
>
> I want to create a table like design using only divs and css, having
> both fixed and variable column widths in header, content and footer.
> When resizing the window I want only the column with variable width to
> expand, shrink and stop shrinking when you reach a minimum width even  
> if
> you continue resizing the browser window.
>
>
>
> For mozilla it's possible to solve this using css properties min-width
> and max-width, but when it comes to IE you just want to cry every
> goddamn time you resize the window. The client I work with don't want  
> us
> to use any scripts which don't make my life easy at all. If I only  
> could
> use scipts(javascript/vb) with behaviours or resizing events for  
> solving
> the IE min/max width problem.
>
>
>
> Example:
>
>
>
> Header area:
>
> - Column1: fixed width 150px;
>
> - Column2: resizable when resizing window, but with a min-width of  
> 300px
>
> - Column3: fixed width 150px;
>
>
>
> Content area:
>
> - Column1: resizable when resizing window, but with a min-width of  
> 400px
>
> - Column2: fixed width 200px;
>
>
>
> Footer area:
>
> - Column1: resizable when resizing window, but with a min-width of  
> 600px
>
>
>
> All the column heights just expand with the content you put in the  
> divs.
>
>
>
>
>
> Question:
>
> How can I create a table design like the example above using only html
> and css to make it work in ie and mozilla, without using behaviours or
> any client side script languages at all?
>
>
>
> Anyone with the same problem, having a solution to the problem or any
> example websites would be of BIG interest to me.
>
>
>
> I have actually tried for weeks and I believe it's impossible to solve!
> :-(
>
> I would be happy if there are any html/css gods out there that can tell
> me that I'm completely wrong about it. :-)
>
>
>
> Cheers,
>
>
>
> Robert Hansson.
>
>
>
>
> _______________________________________________________________________ 
> __________________________________________________
> Internet communications are not secure and therefore Oyster Partners  
> Ltd does not accept legal responsibility for the contents of this  
> message. Any views or opinions presented are solely those of the  
> author and do not necessarily represent those of Oyster Partners Ltd.
> --
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>