[css-d] Any order columns with liquid layout

[Angel Martin Alganza]

Hello everybody,

I've been playing around a little with  negative margins to show two or
three columns in different order they are in the HTML code.   I've used
the information on a few articles and examples on positioniseverything,
LayoutGala, A list apart, Meyer's web, etc.  In all cases, to calculate
the appropriate negative margins, widths need to be fixed,  as far as I
have understood from the examples and articles.

What I'm trying to achieve is to show the navigation (fixed with on em)
at the left of  the main section (I'd like it to be liquid, with a max-
and a min-width on em), while it actually comes after it on the code:

...
...

Is there any method described somewhere which would allow to do that?
Or has somebody tried/succeeded doing something like that, please?
Three columns instead of two, of course, would be even better.  :-)

Thank you in advance.

Regards,
Ángel

P.S.: I'm using HTML5 and CSS3 and, for this design, I don't care about
IE (any version) or old browsers.  I'm just looking for the best simple
way to achieve the described result.

-- 
Angel Martin Alganza
Departamento de Genetica, Universidad de Granada
Full contact data at http://www.ugr.es/~ama/
PGP Public key at http://www.ugr.es/~ama/ama-pgp-key
--
() ASCII Ribbon Campaign - http://www.asciiribbon.org/
/\ Against all HTML e-mail and proprietary attachments
Please avoid sending me Word or PowerPoint attachments
http://linux.sgms-centre.com/advocacy/no-ms-office.php
__
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] Any order columns with liquid layout

[Thierry Koblentz]

> I've been playing around a little with  negative margins to show two or
> three columns in different order they are in the HTML code.   I've used
> the information on a few articles and examples on positioniseverything,
> LayoutGala, A list apart, Meyer's web, etc.  In all cases, to calculate
> the appropriate negative margins, widths need to be fixed,  as far as I
> have understood from the examples and articles.
> 
> What I'm trying to achieve is to show the navigation (fixed with on em)
> at the left of  the main section (I'd like it to be liquid, with a max-
> and a min-width on em), while it actually comes after it on the code:
> 
> ...
> ...
> 
> Is there any method described somewhere which would allow to do that?
> Or has somebody tried/succeeded doing something like that, please?
> Three columns instead of two, of course, would be even better.  :-)

I'm not sure I understand what you're trying to achieve. But if you have a
navigation bar sized in EMs and want to style it with a min/max-width in EMs
it won't work. Because the nav will never reach the min/max values.

--
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] Any order columns with liquid layout

[David Laakso]

Angel Martin Alganza wrote:
> What I'm trying to achieve is to show the navigation (fixed with on em)
> at the left of  the main section (I'd like it to be liquid, with a max-
> and a min-width on em), while it actually comes after it on the code:
>
> Regards,
> Ángel
>
>   




It is going to look a little peculiar, as Thierry mentioned.
This is 38em min/960px max.
Only in a 640px window will the nav block come close to touching block 
"one."
Please see:

Best,
~d



-- 
desktop
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] Any order columns with liquid layout

[Angel Martin Alganza]

Hello Thierry,

On Thu, Jun 17, 2010 at 08:33:13AM -0700, Thierry Koblentz wrote:
 
> I'm not sure I understand what you're trying to achieve. But if you have a
> navigation bar sized in EMs and want to style it with a min/max-width in EMs
> it won't work. Because the nav will never reach the min/max values.

I don't.  I want a navigation bar with fixed width (let say 10em)
which flotes left to the main section (which is the one I want to have
min/max widths).  The thing is that I want the main section (not the
nav bar) to adapt to the window width, but only to a certain max width
(I do not want it to be wider than let say 30em, to make it easy to
read).

Thank you and regards,
Ángel

-- 
Angel Martin Alganza
Departamento de Genetica, Universidad de Granada
Full contact data at http://www.ugr.es/~ama/
PGP Public key at http://www.ugr.es/~ama/ama-pgp-key
--
() ASCII Ribbon Campaign - http://www.asciiribbon.org/
/\ Against all HTML e-mail and proprietary attachments
Please avoid sending me Word or PowerPoint attachments
http://linux.sgms-centre.com/advocacy/no-ms-office.php
__
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] Any order columns with liquid layout

[Thierry Koblentz]

> > I'm not sure I understand what you're trying to achieve. But if you
> have a
> > navigation bar sized in EMs and want to style it with a min/max-width
> in EMs
> > it won't work. Because the nav will never reach the min/max values.
> 
> I don't.  I want a navigation bar with fixed width (let say 10em)
> which flotes left to the main section (which is the one I want to have
> min/max widths).  The thing is that I want the main section (not the
> nav bar) to adapt to the window width, but only to a certain max width
> (I do not want it to be wider than let say 30em, to make it easy to
> read).

I think this should work *exactly* like you want:

http://www.ez-css.org/test/dare.html


--
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] Any order columns with liquid layout

[Angel Martin Alganza]

Hello David,

Thank you for your answer.

On Thu, Jun 17, 2010 at 12:05:25PM -0400, David Laakso wrote:
 
> This is 38em min/960px max.

It's the main content what I'm wondering if it would be possible to
make it "flexible" between let say 20em and 40 em.  I would like the
other columns to stay fixed (10em) and only main to adapt between the
limits.

> 

I'm trying to not use percentages, but em, since I don't want the
content to spread too much when the window is large.  I want it to
have certain flexibility, but not through the point were the main
content has more than about 40em width (when reading become very
uncomfortable).

Again thank you, and regards,
Ángel

-- 
Angel Martin Alganza
Departamento de Genetica, Universidad de Granada
Full contact data at http://www.ugr.es/~ama/
PGP Public key at http://www.ugr.es/~ama/ama-pgp-key
--
() ASCII Ribbon Campaign - http://www.asciiribbon.org/
/\ Against all HTML e-mail and proprietary attachments
Please avoid sending me Word or PowerPoint attachments
http://linux.sgms-centre.com/advocacy/no-ms-office.php
__
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] Any order columns with liquid layout

[Angel Martin Alganza]

Hello Thierry,

On Thu, Jun 17, 2010 at 09:47:55AM -0700, Thierry Koblentz wrote:
 
> I think this should work *exactly* like you want:
> 
> http://www.ez-css.org/test/dare.html

Not really.  What I want is closer to   
but with the main section "flexible" between limits (mainly max-width).

Regards,
Ángel

-- 
Angel Martin Alganza
Departamento de Genetica, Universidad de Granada
Full contact data at http://www.ugr.es/~ama/
PGP Public key at http://www.ugr.es/~ama/ama-pgp-key
--
() ASCII Ribbon Campaign - http://www.asciiribbon.org/
/\ Against all HTML e-mail and proprietary attachments
Please avoid sending me Word or PowerPoint attachments
http://linux.sgms-centre.com/advocacy/no-ms-office.php
__
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] Any order columns with liquid layout

[David Laakso]

David Laakso wrote:
> Angel Martin Alganza wrote:
>>
>> I'm trying to not use percentages, but em, since I don't want the
>> content to spread too much when the window is large.  I want it to
>> have certain flexibility, but not through the point were the main
>> content has more than about 40em width (when reading become very
>> uncomfortable).
>>
>> Again thank you, and regards,
>> Ángel
>>
>>   
>
>
>
>
> Use whatever you want. What is comfortable for you may not be so 
> comfortable for your next-door neighbor, her husband, her mother or 
> her father, or her children.
>
> Please see:
> 
>
> At 116.5dpi in a window wider than 1200 Georgia yields the center 
> column at around 68 to 80 characters [including spaces] per line.
> At 116.5dpi in windows 1024 through 640 Georgia yields the center 
> column at somewhat fewer characters [including spaces] per line.
>
> Best,
> ~d
>
>
>
>
>
>


-- 
desktop
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] Any order columns with liquid layout

[Thierry Koblentz]

> > I think this should work *exactly* like you want:
> >
> > http://www.ez-css.org/test/dare.html
> 
> Not really.  What I want is closer to   

Sorry, I thought you mentioned a *two* column layout.

> but with the main section "flexible" between limits (mainly max-width).

On the page I posted I forgot to remove the EM value, check again and you'll
see that that main section is fluid with min/max values.

What you want to do is feasible with a nested table, but who wants to do
that? :-(

--
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] Any order columns with liquid layout

[Jay Tanna]

Thierry,

Perhaps the OP was confused because your  isn't closed properly.  
You have missed out  just before 

My 2 pence contribution here!  I don't understand the question though!

hth

--- On Thu, 17/6/10, Thierry Koblentz  wrote:


> > > I think this should work
> *exactly* like you want:
> > >
> > > http://www.ez-css.org/test/dare.html
> > 
> > Not really.  What I want is closer
> to   
> 
> Sorry, I thought you mentioned a *two* column layout.
> 
> > but with the main section "flexible" between limits
> (mainly max-width).
> 
> On the page I posted I forgot to remove the EM value, check
> again and you'll
> see that that main section is fluid with min/max values.
> 
> What you want to do is feasible with a nested table, but
> who wants to do
> that? :-(
> 
> 


  
__
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] Any order columns with liquid layout

[Thierry Koblentz]

> Perhaps the OP was confused because your  isn't closed
> properly.  You have missed out  just before 

You're right, thx for the heads up. It's fixed now.


--
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/