Re: [css-d] Implementing "float: center;"

[rowland shepard]

See http://developer.apple.com/internet/webcontent/bestwebdev.html.

They call it "CSS with Minimal Tables".
Nothing wrong with a little structure, and using tables is much easier and
faster then divs and floating things about.
  

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Michael B Allen
Sent: Tuesday, May 06, 2008 1:57 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Implementing "float: center;"

On Tue, May 6, 2008 at 12:09 PM, Someone wrote:
>
>
> Granted that you may have a client that insists (probably against your
> better judgement) that they want a pseudo 'float:center', but why do you
> want to do it?
>
> Look at any newspaper or magazine and the text is always one side of an
> image or the other, and top and bottom, but never both sides. It makes the
> text extremely difficult to follow, unless the reader has a ruler or the
> text is set on visible horizontal lines.
>
> IMO (Certainly in the Western World) text is read from top to bottom, left
> to right in a more or less continuous flow. Even with left or right
'chunks'
> occupied by images etc, the flow is maintained.
>
> As an exercise in formatting it could be fun I guess. :-)
>
> My 2c

The problem is that I'm not doing documents, I'm doing applications
and unfortunately it seems CSS' layout capability is tailored to
creating documents with text elements that "flow" and "float" and so
on. Web applications are commonly collections of UI elements organized
into tables (e.g. forms). If it were up to me I would just use a
tables (at least one maybe as a layout "backbone"). But unfortunately
I can't because currently the community perception is that anyone
using tables for layouts is ignorant and that could affect the
marketability of a product that doesn't follow approved practices.

This doesn't really apply to the "float: center" effort but I'm a
little annoyed by the customary "why do you want to do that?"
response. Not everyone is laying out blogs, wikis and home pages.

Mike
__
css-discuss [EMAIL PROTECTED]
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-discuss [EMAIL PROTECTED]
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] Implementing "float: center;"

[Geoffrey Hoffman]

The only way I can think of to achieve what you are after is with two or
three divs, each with a %-based width, with the text broken up into left and
right of the picture.

If you have dynamic content, which I am guessing you do, that may not be
practical.

If you want text to the left of a picture and text to the right of a
picture, do a 3-column layout for that portion of the page. The web is chock
full of various 3-column layout examples.

The fact that there is no such thing as float:center; should tell you that
it isn't something people normally do. It makes for difficult to read
content anyway, particularly if what you are trying to do is have sentences
flow across the picture. The eye is trained (by hundreds of years of design
in print media) to treat that type of layout as two columns with a picture
in between.

Anyway, check this out: http://www.csstextwrap.com/
__
css-discuss [EMAIL PROTECTED]
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] Implementing "float: center;"

[Michael B Allen]

On Tue, May 6, 2008 at 12:09 PM, Someone wrote:
>
>
> Granted that you may have a client that insists (probably against your
> better judgement) that they want a pseudo 'float:center', but why do you
> want to do it?
>
> Look at any newspaper or magazine and the text is always one side of an
> image or the other, and top and bottom, but never both sides. It makes the
> text extremely difficult to follow, unless the reader has a ruler or the
> text is set on visible horizontal lines.
>
> IMO (Certainly in the Western World) text is read from top to bottom, left
> to right in a more or less continuous flow. Even with left or right 'chunks'
> occupied by images etc, the flow is maintained.
>
> As an exercise in formatting it could be fun I guess. :-)
>
> My 2c

The problem is that I'm not doing documents, I'm doing applications
and unfortunately it seems CSS' layout capability is tailored to
creating documents with text elements that "flow" and "float" and so
on. Web applications are commonly collections of UI elements organized
into tables (e.g. forms). If it were up to me I would just use a
tables (at least one maybe as a layout "backbone"). But unfortunately
I can't because currently the community perception is that anyone
using tables for layouts is ignorant and that could affect the
marketability of a product that doesn't follow approved practices.

This doesn't really apply to the "float: center" effort but I'm a
little annoyed by the customary "why do you want to do that?"
response. Not everyone is laying out blogs, wikis and home pages.

Mike
__
css-discuss [EMAIL PROTECTED]
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] Implementing "float: center;"

[Michael B Allen]

On Tue, May 6, 2008 at 11:22 AM, Michael B Allen <[EMAIL PROTECTED]> wrote:
> On Tue, May 6, 2008 at 9:32 AM, Mark Richards <[EMAIL PROTECTED]> wrote:
>  > > > > No. I want fixed center, liquid secondary.
>  >
>  > > >  Three versions (Georg Sortun) depending on the source
>  >  > order you seek:
>  >  > >  
>  >  > >  
>  >  > >  
>  >  >
>  >  > Now this *is* what I want.
>  >
>  >  When I saw this topic come up I was hoping to see a solution where the
>  >  "float:center" item has text flowing around both sides of the item, such
>  >  as this:
>  >
>  >  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut elit arcu,
>  >  egestas et, bibendum fermentum, consequat a, sem. Curabitur felis diam,
>  >  elementum eget, dictum ** quis, elementum quis, est.
>  >  Sed porta vehicula ** lorem. Curabitur in dui vel
>  >  eros fringilla *float:--* vulputate. Mauris mi lectus,
>  >  mattis vitae,  *-center-* tristique eget, laoreet ut,
>  >  nunc. Pellentesque ** sodales, sapien sit amet
>  >  malesuada congue, orci ** neque aliquam augue, quis
>  >  tincidunt quam nisi nec turpis. Morbi non odio. Maecenas a nisi.
>  >  Maecenas eget orci. Lorem ipsum dolor sit amet, consectetuer adipiscing
>  >  elit.
>  >
>  >  Anyone know of a way to do this?
>
>  Ah, true. I guess this isn't exactly what I wanted either.
>
>  There is one thing that might get this closer.
>
>  Georg's examples have an extra div inside the 50% width side1 / side2. See:
>
>  
>  
>  a side column – third in source.
>  
>  
>
>  I think if you remove that div so that it's like:
>
>  
>  a side column – third in source.
>  
>
>  the text doesn't flow around, it goes *under*. Now however, because
>  the width of the center div is fixed, you could float: left a div of
>  half the size just to push the text out from under that area. Do the
>  same on the left side with a float: right. That will give you two
>  columns of text which still isn't exactly what we want but the text
>  should flow around the center element.

Here's the two column version:

http://www.ioplex.com/~miallen/float-center-two-cols.html

One limitation of this is that the the height of the center div must
be known in advance.

Mike

-- 
Michael B Allen
PHP Active Directory SPNEGO SSO
http://www.ioplex.com/
__
css-discuss [EMAIL PROTECTED]
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] Implementing "float: center;"

[Gunlaug Sørtun]

Mark Richards wrote:

> When I saw this topic come up I was hoping to see a solution where
> the "float:center" item has text flowing around both sides of the
> item...

In short: can't be done with CSS - yet.

You can take IE/win's resizing weaknesses out of this...

...and get a two-column solution, but that is as good as it gets.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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] Implementing "float: center;"

[Michael B Allen]

On Tue, May 6, 2008 at 9:32 AM, Mark Richards <[EMAIL PROTECTED]> wrote:
> > > > No. I want fixed center, liquid secondary.
>
> > >  Three versions (Georg Sortun) depending on the source
>  > order you seek:
>  > >  
>  > >  
>  > >  
>  >
>  > Now this *is* what I want.
>
>  When I saw this topic come up I was hoping to see a solution where the
>  "float:center" item has text flowing around both sides of the item, such
>  as this:
>
>  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut elit arcu,
>  egestas et, bibendum fermentum, consequat a, sem. Curabitur felis diam,
>  elementum eget, dictum ** quis, elementum quis, est.
>  Sed porta vehicula ** lorem. Curabitur in dui vel
>  eros fringilla *float:--* vulputate. Mauris mi lectus,
>  mattis vitae,  *-center-* tristique eget, laoreet ut,
>  nunc. Pellentesque ** sodales, sapien sit amet
>  malesuada congue, orci ** neque aliquam augue, quis
>  tincidunt quam nisi nec turpis. Morbi non odio. Maecenas a nisi.
>  Maecenas eget orci. Lorem ipsum dolor sit amet, consectetuer adipiscing
>  elit.
>
>  Anyone know of a way to do this?

Ah, true. I guess this isn't exactly what I wanted either.

There is one thing that might get this closer.

Georg's examples have an extra div inside the 50% width side1 / side2. See:



a side column – third in source.



I think if you remove that div so that it's like:


a side column – third in source.


the text doesn't flow around, it goes *under*. Now however, because
the width of the center div is fixed, you could float: left a div of
half the size just to push the text out from under that area. Do the
same on the left side with a float: right. That will give you two
columns of text which still isn't exactly what we want but the text
should flow around the center element.

Mike
__
css-discuss [EMAIL PROTECTED]
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] Implementing "float: center;"

[Mark Richards]

> > > No. I want fixed center, liquid secondary.
> >  Three versions (Georg Sortun) depending on the source 
> order you seek:
> >  
> >  
> >  
> 
> Now this *is* what I want.

When I saw this topic come up I was hoping to see a solution where the
"float:center" item has text flowing around both sides of the item, such
as this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut elit arcu,
egestas et, bibendum fermentum, consequat a, sem. Curabitur felis diam,
elementum eget, dictum ** quis, elementum quis, est. 
Sed porta vehicula ** lorem. Curabitur in dui vel 
eros fringilla *float:--* vulputate. Mauris mi lectus, 
mattis vitae,  *-center-* tristique eget, laoreet ut, 
nunc. Pellentesque ** sodales, sapien sit amet 
malesuada congue, orci ** neque aliquam augue, quis 
tincidunt quam nisi nec turpis. Morbi non odio. Maecenas a nisi.
Maecenas eget orci. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. 

Anyone know of a way to do this?

Mark
__
css-discuss [EMAIL PROTECTED]
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] Implementing "float: center;"

[Michael B Allen]

On Mon, May 5, 2008 at 5:21 PM, David Laakso
<[EMAIL PROTECTED]> wrote:
>
>
> > No. I want fixed center, liquid secondary.
> >
> >
>
>
>  I should have been a dentist...
>
>  Three versions (Georg Sortun) depending on the source order you seek:
>  
>  
>  

Now this *is* what I want.

Funny I just figured out the same technique of floating the main div
within one of the secondary divs and then using a nagative margin to
center it. But I didn't get the secondary text lined up with the edges
of the centered div like these examples do.

These will be very helpful.

Thanks,
Mike
__
css-discuss [EMAIL PROTECTED]
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] Implementing "float: center;"

[David Laakso]

> No. I want fixed center, liquid secondary.
>   


I should have been a dentist...

Three versions (Georg Sortun) depending on the source order you seek:





-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
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] Implementing "float: center;"

[Michael B Allen]

On Mon, May 5, 2008 at 4:29 PM, David Laakso
<[EMAIL PROTECTED]> wrote:
> Michael B Allen wrote:
>
> >
> > Is there any way to float a div into the center of a page and have
> > elements wrap around it on either side?
> >
> > Basically I want the behavior that you would expect from "float:
> > center;" if there were such a thing.
> >
> > Mike
> >
> >
>
>
>  We're having difficulty understanding what you want.
>
>  A float can be left, right, or none. There is no float: center;
>
>  All the layouts on this page [1] that have the white panel in the center
> /may/ be what you are after?
>
>  [1]
>  

No. I want fixed center, liquid secondary.

I haven't explored Michael's suggestion of floating right and left
secondary columns. But I already anticipate that that will be
problematic because they won't completely fill the space surrounding
the fixed width centered div. But we'll see ...

Mike
__
css-discuss [EMAIL PROTECTED]
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] Implementing "float: center;"

[Michael B Allen]

Hi,

Is there any way to float a div into the center of a page and have
elements wrap around it on either side? If I use "margin: 0 auto" to
center a div or a float + margin to center a div, then I don't get
content in one or both of the margins.

Or is there any way to center a div on top of and completely
independently of other elements. Without float behavior I can't
firgure out how to stop the div's margins from affecting the flow of
the surrounding elements. If I use a negative margin-bottom with
"position: relative; z-index: 1" to shift up the surrounding elements,
that would be perfect if I knew the exact height of the centered div.
But I don't know the exact height of the center element because it
needs to grow depending on the content.

Basically I want the behavior that you would expect from "float:
center;" if there were such a thing.

Mike
__
css-discuss [EMAIL PROTECTED]
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] Implementing "float: center;"

[David Laakso]

Michael B Allen wrote:
> Is there any way to float a div into the center of a page and have
> elements wrap around it on either side? 
>
> Basically I want the behavior that you would expect from "float:
> center;" if there were such a thing.
>
> Mike
>   


We're having difficulty understanding what you want.

A float can be left, right, or none. There is no float: center;

All the layouts on this page [1] that have the white panel in the center 
/may/ be what you are after?

[1]



-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
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] Implementing "float: center;"

[Michael Adams]

On Mon, 05 May 2008 15:22:33 -0400
Michael B Allen wrote:

> Hi,
> 
> Is there any way to float a div into the center of a page and have
> elements wrap around it on either side? If I use "margin: 0 auto" to
> center a div or a float + margin to center a div, then I don't get
> content in one or both of the margins.
> 

Are you looking at this the right way? It is more normal to float the
other elements left and right of your center content.

-- 
Michael

All shall be well, and all shall be well, and all manner of things shall
be well

 - Julian of Norwich 1342 - 1416
__
css-discuss [EMAIL PROTECTED]
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/