[css-d] Grid Based Layout

2010-06-09 Thread Nick Leaton 
I'm trying to do some layout of some html.

The basic idea is to get six divs laid out into a grid pattern of two
columns and three rows.
Each div has a separate id and I want the CSS to determine the layout
and which column
and row is used to display the data.

The data can be of varying lengths, not known in advance.

The top of each rows should be aligned to the same level.

This is my first stab, but it doesn't work.

Perhaps I need to nest divs, but that seems a little strange to be.
After all why
would I need to nest divs which is information about layout, in the
HTML. Why can't
I do all the layout in the CSS

Nick

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
http://www.w3.org/1999/xhtml";>
   Title
   

   
   
   
   top left
   
   
   
   
   top right
   
   
   middle left
   
   
   
   
   middle right
   
   
   bottom left
   
   
   bottom right
   
   
   
   
   


--
Nick

-- 
Nick
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Grid Based Layout

2010-06-09 Thread David Laakso 
Nick Leaton wrote:
> I'm trying to do some layout of some html.
>
> The basic idea is to get six divs laid out into a grid pattern of two
> columns and three rows.
> Each div has a separate id and I want the CSS to determine the layout
> and which column
> and row is used to display the data.
>
> The data can be of varying lengths, not known in advance.
>
> The top of each rows should be aligned to the same level.
>
> This is my first stab, but it doesn't work.
>   




In new sites, for forward compatibility reasons, it is best to use a 
strict html, strict xhtml, or html5 doctype.
In your example, this,

bottomright {
   float:right;
   width:50%;
   background: Darkorange;
   }

should read.

#bottomright {
   float:left;
   width:50%;
   background: red;
   }




> Perhaps I need to nest divs, but that seems a little strange to be.
> After all why
> would I need to nest divs which is information about layout, in the
> HTML. Why can't
> I do all the layout in the CSS
>   



If you need to hit IE/6, IE/7, and the compliant browsers, equal height 
(any column longest) columns using only CSS is a difficult problem to 
solve without using numerous nested divisions (at least at present). It 
is particularly difficult in the situation you have with three rows, 
each of them requiring equal height columns.

Some methods...


the 2 column version of the below tutorial reference may be your best 
bet


The alternatives to a "pure" CSS would be to create equal height columns 
using images (faux columns [1]) or by using javascript [2] [3].

[1] 
[2] 
[3] 



> Nick
>   



Best,
~d



-- 
http://chelseacreekstudio.com/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Grid Based Layout

2010-06-09 Thread David Hucklesby 
On 6/9/10 5:09 AM, Nick Leaton wrote:
> I'm trying to do some layout of some html.
>
> The basic idea is to get six divs laid out into a grid pattern of two
> columns and three rows.
> Each div has a separate id and I want the CSS to determine the layout
> and which column
> and row is used to display the data.
>
[...]

Here ya go:

http://webwiz.robinshosting.com/temp/css-table-layout/

-- 
Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Grid Based Layout

2010-06-10 Thread Nick Leaton 
That is in effect what I ended up doing.

Putting an extra layer of divs into the output, and then using that to
get the output layed out correctly.

A solution that works.

However, I find it a bit strange. CSS should allow you to put a div
with a given ID into a given style and layout, without having to nest
divs, which is putting style into the HTML.

I sort of get the reason, that its bending the layout of float which
is designed to do picture layout to do more than its designed to.

Thanks for everyone's help

Nick

On Wed, Jun 9, 2010 at 8:14 PM, David Hucklesby  wrote:
> On 6/9/10 5:09 AM, Nick Leaton wrote:
>> I'm trying to do some layout of some html.
>>
>> The basic idea is to get six divs laid out into a grid pattern of two
>> columns and three rows.
>> Each div has a separate id and I want the CSS to determine the layout
>> and which column
>> and row is used to display the data.
>>
> [...]
>
> Here ya go:
>
> http://webwiz.robinshosting.com/temp/css-table-layout/
>
> --
> Cordially,
> David
> --
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>



-- 
Nick
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Grid Based Layout

2010-06-10 Thread Lowell Allen 
On Jun 10, 2010, at 9:03 AM, Nick Leaton wrote:

[snip]

> On Wed, Jun 9, 2010 at 8:14 PM, David Hucklesby  wrote:
>> On 6/9/10 5:09 AM, Nick Leaton wrote:
>>> I'm trying to do some layout of some html.
>>> 
>>> The basic idea is to get six divs laid out into a grid pattern of two
>>> columns and three rows.
>>> Each div has a separate id and I want the CSS to determine the layout
>>> and which column
>>> and row is used to display the data.
>>> 
>> [...]
>> 
>> Here ya go:
>> 
>> http://webwiz.robinshosting.com/temp/css-table-layout/

[snip]

Take a look at CSS code for this popular grid system: 

--
Lowell Allen


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Grid Based Layout

2010-06-10 Thread David Hucklesby 
On 6/10/10 7:47 AM, Lowell Allen wrote:
> On Jun 10, 2010, at 9:03 AM, Nick Leaton wrote:
>
> [snip]
>
>> On Wed, Jun 9, 2010 at 8:14 PM, David
>> Hucklesby  wrote:
>>> On 6/9/10 5:09 AM, Nick Leaton wrote:
 I'm trying to do some layout of some html.

 The basic idea is to get six divs laid out into a grid pattern
 of two columns and three rows. Each div has a separate id and I
 want the CSS to determine the layout and which column and row
 is used to display the data.

>>> [...]
>>>
>>> Here ya go:
>>>
>>> http://webwiz.robinshosting.com/temp/css-table-layout/
>
> [snip]
>
> Take a look at CSS code for this popular grid
> system:
>

Ah yes. Rigid pixel-width layouts. Just perfect in these days of iPad
and mobile devices... :-\

Cordially,
David
--

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Grid Based Layout

2010-06-10 Thread Chris F.A. Johnson 
On Thu, 10 Jun 2010, David Hucklesby wrote:

> On 6/10/10 7:47 AM, Lowell Allen wrote:
> > On Jun 10, 2010, at 9:03 AM, Nick Leaton wrote:
> >
> > [snip]
> >
> >> On Wed, Jun 9, 2010 at 8:14 PM, David
> >> Hucklesby  wrote:
> >>> On 6/9/10 5:09 AM, Nick Leaton wrote:
>  I'm trying to do some layout of some html.
> 
>  The basic idea is to get six divs laid out into a grid pattern
>  of two columns and three rows. Each div has a separate id and I
>  want the CSS to determine the layout and which column and row
>  is used to display the data.
> 
> >>> [...]
> >>>
> >>> Here ya go:
> >>>
> >>> http://webwiz.robinshosting.com/temp/css-table-layout/
> >
> > [snip]
> >
> > Take a look at CSS code for this popular grid
> > system:
> >
> 
> Ah yes. Rigid pixel-width layouts. Just perfect in these days of iPad
> and mobile devices... :-\

   Better is the fluid version:  

-- 
   Chris F.A. Johnson, 
   Author:
   Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
   Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Grid Based Layout

2010-06-10 Thread Thierry Koblentz 
> > >>> http://webwiz.robinshosting.com/temp/css-table-layout/
> > >
> > > [snip]
> > >
> > > Take a look at CSS code for this popular grid
> > > system:
> > >
> >
> > Ah yes. Rigid pixel-width layouts. Just perfect in these days of iPad
> > and mobile devices... :-\
> 
>Better is the fluid version:
> 

These are simple templates with width-less content containers. 
A "%" width on the wrapper will make them fluid.

http://www.ez-css.org/css_templates

They only use a few DIVs and not too many CSS rules, which should make
things easier for people who are moving from tables to DIV layout.

Disclaimer: I made them

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Grid Based Layout

2010-06-11 Thread David Hucklesby 
On 6/10/10 11:42 AM, Thierry Koblentz wrote:
>> http://webwiz.robinshosting.com/temp/css-table-layout/

 [snip]

 Take a look at CSS code for this popular grid
 system:

>>>
>>> Ah yes. Rigid pixel-width layouts. Just perfect in these days of
>>> iPad and mobile devices... :-\
>>
>> Better is the fluid version:
>> 
>
> These are simple templates with width-less content containers. A "%"
> width on the wrapper will make them fluid.
>
> http://www.ez-css.org/css_templates
>
> They only use a few DIVs and not too many CSS rules, which should
> make things easier for people who are moving from tables to DIV
> layout.
>
> Disclaimer: I made them
>

Thank you, yes. I already stole several ideas from your code. Lots of
excellent techniques in a well-documented "framework." I love your work,
Thierry.

Cordially,
David
--

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/