Re: [css-d] Grid Based Layout
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:http://960.gs/ Ah yes. Rigid pixel-width layouts. Just perfect in these days of iPad and mobile devices... :-\ Better is the fluid version: http://www.designinfluences.com/fluid960gs/ 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/
Re: [css-d] Grid Based Layout
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 huckle...@gmail.com 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
On Jun 10, 2010, at 9:03 AM, Nick Leaton wrote: [snip] On Wed, Jun 9, 2010 at 8:14 PM, David Hucklesby huckle...@gmail.com 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: http://960.gs/ -- 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
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 Hucklesbyhuckle...@gmail.com 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:http://960.gs/ 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
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 Hucklesbyhuckle...@gmail.com 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:http://960.gs/ Ah yes. Rigid pixel-width layouts. Just perfect in these days of iPad and mobile devices... :-\ Better is the fluid version: http://www.designinfluences.com/fluid960gs/ -- Chris F.A. Johnson, http://cfajohnson.com 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
http://webwiz.robinshosting.com/temp/css-table-layout/ [snip] Take a look at CSS code for this popular grid system:http://960.gs/ Ah yes. Rigid pixel-width layouts. Just perfect in these days of iPad and mobile devices... :-\ Better is the fluid version: http://www.designinfluences.com/fluid960gs/ 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/
[css-d] Grid Based Layout
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
!DOCTYPE html SYSTEM http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
headtitleTitle/title
style type=text/css
!--
#topleft {
float:left;
width:50%;
background: yellow;
}
#topright {
float:left;
width:50%;
background: green;
}
#midleft {
clear:both;
float:left;
width:50%;
background: cyan;
}
#midright {
float:left;
width:50%;
background: blue;
}
#bottomleft {
clear:both;
float:left;
width:50%;
background: brown;
}
bottomright {
float:right;
width:50%;
background: Darkorange;
}
--
/style
/head
body
div id=toplefttop left
br/
br/
br/
/div
div id=toprighttop right
br/
/div
div id=midleftmiddle left
br/
br/
br/
/div
div id=midrightmiddle right
br/
/div
div id=bottomleftbottom left
br/
/div
div id=bottomrightbottom right
br/
br/
br/
/div
/body
/html
--
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
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...
http://www.satzansatz.de/cssd/companions.html
http://www.positioniseverything.net/articles/onetruelayout/
the 2 column version of the below tutorial reference may be your best
bet
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
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] http://www.alistapart.com/articles/fauxcolumns/
[2] http://www.gunlaug.no/tos/moa_11f.html
[3] http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
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
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/
