Re: [css-d] Multiple, evenly split, fluid columns inside fixed-width parent container?

[David Laakso]

On Tue, Apr 24, 2012 at 8:23 PM, Micky Hulse  wrote:

Could anyone point me towards an example of an evenly split
multi-column (4+) fluid layout?

 I have a fixed-width container that varies its width using media
queries... I would like to see if I can put a row with multiple
columns inside this container and have the row/columns expand to fit
the area (evenly).

Thanks!
 M


You might consider using a CSS Table. Its not a table in the
traditional sense... but looks and behaves like one. The columns can
be both equal height and width and will work well with media
queries
Please see article by Georg Sortun here:


Best,
David Laakso



-- 
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@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] Multiple, evenly split, fluid columns inside fixed-width parent container?

[Barney Carroll]

Hiya Micky,

I always forget that a reply on this list won't reply to the list. Sorry.
As for margins with columns, I think the best idea is to create children
wrappers within the columns and give them margins — the parent wrapper has
the proportional width relative to the parent, while the child has a set
margin, say 1em. A key part of Nicole's philosophy with OOCSS is that you
shouldn't try to overload potentially conflicting properties on the same
element.

For an example of OOCSS grids applying columns conditionally via media
queries, you might want to check out my site (and the CV linked within it):
barneycarroll.com ; both feature layouts that on a wide screen benefit from
side-by-side info, but read sequentially top-to-bottom if the screen isn't
wide enough to elegantly display that text horizontally stacked. Try
resizing the browser window and looking at the CSS.


On Thursday, 26 April 2012, Micky Hulse wrote:

> Hi Philippe, thank you for the help!
>
> On Wed, Apr 25, 2012 at 5:33 PM, Philippe Wittenbergh 
> >
> wrote:
> > div { width: 90%; } /* replace 90% with value in px, em, whatever you
> want to use */
> > ..
> > If that is not what you're asking, put a skeleton page up somewhere, or
> a sketch, or something…
>
> Thanks for the code sample! That's very close to what I am looking for.
>
> Is it possible to do margins between columns using percentage values?
> Or, would you recommend using right/left padding/margins on the
> content within the columns (i.e. to simulate margins between columns)?
>
> Also, just in case others are interested in this topic, someone
> emailed me these links off-list:
>
> OOCS:
>
> Wiki:
> 
>
> Source:
> 
>
> Nice example of flexible fluid cols that can be infinitely nested.
>
> Note: The OOCSS grids demo relies upon padding/margins of the content
> within the columns to create spacing between cols.
>
> > Maybe I'm not understanding the question, but that sound rather trivial:
>
> Hehe, sorry to ask a trivial question... I guess I was stuck/fixating
> on the margin between columns; sorry if in my original question I did
> not make that clear. :)
>
> TBH, I've been doing floated/fixed-width layouts for so long... My
> fluid width layout skills are very rusty.
>
> Thanks again!!!
>
> Cheers,
> M
> __
> css-discuss [css-d@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/



-- 
Regards,
Barney

+44 7429177278
__
css-discuss [css-d@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] Multiple, evenly split, fluid columns inside fixed-width parent container?

[Micky Hulse]

Hi Philippe, thank you for the help!

On Wed, Apr 25, 2012 at 5:33 PM, Philippe Wittenbergh  wrote:
> div { width: 90%; } /* replace 90% with value in px, em, whatever you want to 
> use */
> ..
> If that is not what you're asking, put a skeleton page up somewhere, or a 
> sketch, or something…

Thanks for the code sample! That's very close to what I am looking for.

Is it possible to do margins between columns using percentage values?
Or, would you recommend using right/left padding/margins on the
content within the columns (i.e. to simulate margins between columns)?

Also, just in case others are interested in this topic, someone
emailed me these links off-list:

OOCS:

Wiki:


Source:


Nice example of flexible fluid cols that can be infinitely nested.

Note: The OOCSS grids demo relies upon padding/margins of the content
within the columns to create spacing between cols.

> Maybe I'm not understanding the question, but that sound rather trivial:

Hehe, sorry to ask a trivial question... I guess I was stuck/fixating
on the margin between columns; sorry if in my original question I did
not make that clear. :)

TBH, I've been doing floated/fixed-width layouts for so long... My
fluid width layout skills are very rusty.

Thanks again!!!

Cheers,
M
__
css-discuss [css-d@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] Multiple, evenly split, fluid columns inside fixed-width parent container?

[Micky Hulse]

Hi John! Thanks for the reply, I really appreciate it.

On Wed, Apr 25, 2012 at 1:39 PM, John D  wrote:
> letter-spacing might be one option.  Try this article:
> 
> Demo: 

Interesting! It's not exactly what I am looking for, but I had never
seen this technique, so thanks for sharing! :)
__
css-discuss [css-d@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] Multiple, evenly split, fluid columns inside fixed-width parent container?

[Philippe Wittenbergh]

On Apr 25, 2012, at 9:23 AM, Micky Hulse wrote:

> Could anyone point me towards an example of an evenly split
> multi-column (4+) fluid layout?
> 
> I have a fixed-width container that varies its width using media
> queries... I would like to see if I can put a row with multiple
> columns inside this container and have the row/columns expand to fit
> the area (evenly).
> 
> Is there a simple way to do this? I would prefer to use CSS2 for the
> sake of older browsers.

Maybe I'm not understanding the question, but that sound rather trivial:

div { width: 90%; } /* replace 90% with value in px, em, whatever you want to 
use */
div > div { width: 24.95%; float: left; } /* assuming 4 columns */


column
column
column
column


?

If that is not what you're asking, put a skeleton page up somewhere, or a 
sketch, or something…

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/






__
css-discuss [css-d@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] Multiple, evenly split, fluid columns inside fixed-width parent container?

[John D]

letter-spacing might be one option.  Try this article:



Demo: 


> Hello,
> 
> Could anyone point me towards an example of an evenly split
> multi-column (4+) fluid layout?
> 
> I have a fixed-width container that varies its width using media
> queries... I would like to see if I can put a row with multiple
> columns inside this container and have the row/columns expand to fit
> the area (evenly).
> 
> Is there a simple way to do this? I would prefer to use CSS2 for the
> sake of older browsers.
> 
> Is this a pipe dream? I can't seem to find many good examples of
> multiple, evenly split, fluid columns on the net.
> 

  
__
css-discuss [css-d@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] Website work in all browsers, except ie8 - css issue?

[shaunm1976]

Thanks David, tried it, but no change.

Works in all browsers EXCEPT IE8.



--
View this message in context: 
http://css.2040035.n2.nabble.com/Website-work-in-all-browsers-except-ie8-css-issue-tp7485883p7500664.html
Sent from the css-discuss mailing list archive at Nabble.com.
__
css-discuss [css-d@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] respond.js vs ie7 and ie8 (correction)

[Duncan Hill]

On Wed, 25 Apr 2012 15:36:30 +0100, Ellen Herzfeld  wrote:



On 25 Apr 2012, at 11:48, Duncan Hill wrote:

This could potentially drift off-topic for CSS-D as it is more based on  
JavaScript being used to apply styling, and without specific CSS  
queries one of the other lists may have more help to offer.


You are right, but in this case, I had no way of knowing if my problem  
came from the javascript or the CSS, or possibly both.


Seems the JavaScript is failing to provide the correct styling for IE8.


selectivizr requires a JS framework, it would seem prudent to load the  
framework first (jquery)


I'm using nwmatcher with selectivizr because jquery has incomplete  
support (and is missing things I need). I know that makes for a lot of  
js for IE 6/7/8 but it's that or nothing. Anyway, this is just a test  
run. I'll get into optimization later.


The point was that selectivizr 'requires' jquery, it is loading and  
probably triggered 'before' the jquery is available.




I still don't understand this part:





that seems to conditionally serve the stylesheets to IE6+, yet it also  
serves them to all browsers.




Yes, that is the point. IE less than 6 doesn't see the stylesheets that  
are served to all other browsers. Actually, this is something that is a  
holdover from a site that was made a few years ago, when IE 5 and 5.5  
were still around and I had decided that enough was enough for those  
two. So I suppose I could remove it now, since hopefully IE 5 and 5.5  
are dead and buried. I'm still trying to cater to IE6, but my latest  
tests cause it to crash on a regular basis. I haven't decided what I'll  
do about that yet.


If it is no longer needed or relevant, it should be removed to eliminate  
it as a cause.


It's a bit difficult trying to do "mobile first" and still serve a  
desktop site to IE < 9. But it's been difficult with IE for years...


Fully prepare your mobile site for the browsers that can natively handle  
the styling correctly, then you have a solid base to pick off specifics  
for the less capable.

Are there really a lot of IE < 9 'mobile' browsers still in the wild ?


I think you are right and I should go elsewhere with my problem.


There have been many discussions on this list about solving problems with  
@media and mobile styling, I'm sure much better advice will come if you  
are more focused on the CSS first.


Good luck

Duncan
__
css-discuss [css-d@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] respond.js vs ie7 and ie8 (correction)

[Ellen Herzfeld]

On 25 Apr 2012, at 11:48, Duncan Hill wrote:

> This could potentially drift off-topic for CSS-D as it is more based on 
> JavaScript being used to apply styling, and without specific CSS queries one 
> of the other lists may have more help to offer.

You are right, but in this case, I had no way of knowing if my problem came 
from the javascript or the CSS, or possibly both.

> selectivizr requires a JS framework, it would seem prudent to load the 
> framework first (jquery)

I'm using nwmatcher with selectivizr because jquery has incomplete support (and 
is missing things I need). I know that makes for a lot of js for IE 6/7/8 but 
it's that or nothing. Anyway, this is just a test run. I'll get into 
optimization later.

> 
> I still don't understand this part:
> 
>   
>   
>href="/2012/content_modules.css" />
> 
> that seems to conditionally serve the stylesheets to IE6+, yet it also serves 
> them to all browsers.
> 

Yes, that is the point. IE less than 6 doesn't see the stylesheets that are 
served to all other browsers. Actually, this is something that is a holdover 
from a site that was made a few years ago, when IE 5 and 5.5 were still around 
and I had decided that enough was enough for those two. So I suppose I could 
remove it now, since hopefully IE 5 and 5.5 are dead and buried. I'm still 
trying to cater to IE6, but my latest tests cause it to crash on a regular 
basis. I haven't decided what I'll do about that yet.

It's a bit difficult trying to do "mobile first" and still serve a desktop site 
to IE < 9. But it's been difficult with IE for years...

I think you are right and I should go elsewhere with my problem.

Thanks for your time.

Ellen
__
css-discuss [css-d@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] respond.js vs ie7 and ie8 (correction)

[Duncan Hill]

On Tue, 24 Apr 2012 15:52:33 +0100, Ellen Herzfeld  wrote:




Yes, I'm sorry but another error creeped in somewhere and really messed  
everything up. I must have been tired when I did this, but it's now  
fixed. However this doesn't change my problem with IE7/8. Could you look  
again, please?


The page  should now show  
styling everywhere (headers and dls centered, image to the right), but  
in IE 7/8 the spacing between paragraphs is gone and fonts are not  
correct. In IE7 the headers are bold and sans-serif but too small. In  
IE8 the headers are not bold, too small and set in a serif font instead  
of sans-serif. The line-height and top and bottom margins are gone in  
both. In all other browsers including IE9 there is no problem.


On the other page , I  
removed the media queries and respond.js. This way in all browsers (even  
IE 7/8), what I see is the page styled correctly for wide viewports.  
Fonts and spacing are good in IE 7 and 8. So the problem has nothing to  
do with the css itself.


With respond.js, the styles in the media queries are obviously seen by  
IE, but I can't figure out why, in this specific page, there is a  
problem with typography and spacing. And it really is a very simple page.


I'm thinking of just serving a specific desktop stylesheet to IE with a  
conditional comment if I can't find where the problem is.


Or maybe, if this problem is confirmed by others (on this list for  
example), I'll file a bug for respond.js.


Thanks for your help.

Ellen

This could potentially drift off-topic for CSS-D as it is more based on  
JavaScript being used to apply styling, and without specific CSS queries  
one of the other lists may have more help to offer.


First, IE7 is responding better, as are other browsers.

Your code from Paul Irish is modified from his published work. Check that  
those mods are reflected in all areas.

http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

selectivizr requires a JS framework, it would seem prudent to load the  
framework first (jquery)


Google say html5.js can be loaded before or after CSS, but they also note  
the potential for reduced performance.


I still don't understand this part:





that seems to conditionally serve the stylesheets to IE6+, yet it also  
serves them to all browsers.

Is it really required, or is it simply an extra point of failure.
As I see it, the scripts are intended to work from a standard valid  
stylesheet by searching for elements that require modification to enable  
IE, therefore the conditional is superfluous.
I always figure that having only things that have a specific purpose  
leaves less room for error.
Maybe I'm missing something about conditional comments and JavaScript,  
neither of them are my forté.


Best wishes

Duncan
__
css-discuss [css-d@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/