Re: [WSG] Wrapping text before float drop

[David Hucklesby]

On 11/3/11 10:52 AM, Stevio wrote:

If I have two floats side by side, both are floated left as follow:

.myfloat{ float:left; }

and both contain text as follows:

Longer amount of text. Longer amount of text.
Longer amount of text. Longer amount of text. Small amount of text.

Is there any way to prevent the second div from dropping below the
first div when the viewport is narrowed, without specifying widths
for either of the floats?



Other than ways already suggested, and assuming the shorter text fits on
one line, try putting the small amount of text first in the markup, and
floating that DIV only. You can apply a variety of styles to the longer
text to get it to fit the remaining space without "float drop."

It's a complex subject, but this page sums it up quite nicely, I think:

http://www.css-101.org/block-formatting-contexts/index.php
--
Cordially,
David




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] Wrapping text before float drop

[Oliver Boermans]

One more:
-
Option 4 - overflow: hidden instead of float on the second div
-


Although you may need to set some form of width on the first for this to work.

On 4 November 2011 06:51, Russ Weakley  wrote:
>>
>> Think of how two columns work in a table, when they have no specified width. 
>> They adjust to the size of the content and the available width, and wrap 
>> their content if the available width is reduced.
>>
>> This should be easy in CSS, no?
>
>
> The simple answer is that floats are not ideal in this situation.
>
> There are three ways you
> could solve this problem - but as Hassan mentions, they are best done without 
> using "float". All three solutions may present issues in older versions of 
> IE. Without knowing exactly what you are trying to achieve, it is hard to 
> recommend one of these solutions.
>
> -
> Option 1 - display: table, display: table-row, display: table-cell
> -
> 
>
> For example, you could make the two containers operate like table cells. I am 
> not really a fan of this approach, but it would give you the behaviour you 
> are looking for.
>
> 
>
> -
> Option 2 - columns
> -
> 
>
> -
> Option 3 - Flexible Box
> -
> As Hassan mentioned, you could use the flexible box module as a solution
> 
>
>
> Not sure if any of these help...
> Russ
>
>
>
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> ***
>
>


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

[WSG] WSG Passwords

[Rob Howard]

Hello,

Just a quick (worrying) note:

I just filled out the "Forgot Password?" form on the
webstandardsgroup.orgsite and had my password sent back to me.

Either the passwords are being stored in plain text, or are being encrypted
with a key that the website software has access to. Could an admin clear up
the situation with regards to how passwords are being stored?

(Regardless of the reason, I recommend members make sure their passwords
for this list be completely different from their other passwords, in the
event that the WSG site suffers a security breach. This is good practice
regardless, but sometimes software like 1Password is too much of a pain in
the bum to use with every website.)

Thanks,
Rob Howard


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

[WSG] Re: WSG Digest

[Alan C. Whiteman]

On Fri 04 Nov 2011 05:02:22 AM PDT, wsg@webstandardsgroup.org wrote:

*
WEB STANDARDS GROUP MAIL LIST DIGEST
*


From: "Stevio"
Date: Thu, 3 Nov 2011 17:52:45 -
Subject: Wrapping text before float drop

If I have two floats side by side, both are floated left as follow:

.myfloat{
float:left;
}

and both contain text as follows:

Longer amount of text. Longer amount of text. Longer
amount of text. Longer amount of text.
Small amount of text.

Is there any way to prevent the second div from dropping below the first div
when the viewport is narrowed, without specifying widths for either of the
floats?

What I would like is for the text in the first div to wrap before the second
float drops below the first. Is this possible without using widths?

Thanks.
Stephen


**
Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
**





One possible solution would be to specify a relative width for the 
first div and a fixed width for the second div, plus add a min-width to 
the second one.


--
Regards

Alan C Whiteman | Visualis Web Design
(562) 305-2862  | http://visualiswebdesign.com


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***<>

Re: [WSG] Wrapping text before float drop

[Chris F.A. Johnson]

On Thu, 3 Nov 2011, Philip TAYLOR (Webmaster, Ret'd) wrote:

Chris F.A. Johnson wrote:


Use a table.

If the relationship between them is such that they must be side by
side, then a table is the correct element to use.


Two columns must be side-by-side, Chris, yet the received
wisdom is that a table is an inappropriate way of presenting
such material, both because it compromises accessibility
and because the semantics of  are inappropriate to
something that is not fundamentally tabular in nature.


   If they *must* be side by side, then the relationship *is* tabular
   in nature.

--
   Chris F.A. Johnson, 
   Author:
   Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
   Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] Wrapping text before float drop

[Stevio]

Thanks Russ. Box-flex / flexible box does not yet appear to have much 
browser support, so that rules that out for now.


Support for CSS3 columns will arrive in IE10 according to 
http://www.findmebyip.com/litmus, but Windows XP users are stuck with IE8 
and can't even get IE9.


Your solution using CSS tables works well, I may consider that. It just 
shows though that despite all the good reasons for using CSS, it has until 
now had limitations in its ability to provide the flexibility that we 
require, and even to replace some of the things that we could do with the 
all-powerful .


There's also a part of me that thinks using floats for column layout is not 
really the correct use of floats, just as tables was not correct, but we can 
only work with what we've got.


Thanks,
Stephen


- Original Message - 
From: "Russ Weakley" 

To: 
Sent: Thursday, November 03, 2011 8:21 PM
Subject: Re: [WSG] Wrapping text before float drop

Think of how two columns work in a table, when they have no specified 
width. They adjust to the size of the content and the available width, and 
wrap their content if the available width is reduced.


This should be easy in CSS, no?


The simple answer is that floats are not ideal in this situation.

There are three ways you
could solve this problem - but as Hassan mentions, they are best done 
without using "float". All three solutions may present issues in older 
versions of IE. Without knowing exactly what you are trying to achieve, it 
is hard to recommend one of these solutions.


-
Option 1 - display: table, display: table-row, display: table-cell
-


For example, you could make the two containers operate like table cells. I 
am not really a fan of this approach, but it would give you the behaviour 
you are looking for.




-
Option 2 - columns
-


-
Option 3 - Flexible Box
-
As Hassan mentioned, you could use the flexible box module as a solution



Not sure if any of these help...
Russ





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] Wrapping text before float drop

[Stevio]

From: "Hassan Schroeder" 
Sent: Thursday, November 03, 2011 7:32 PM
Think of how two columns work in a table, when they have no specified 
width. They adjust to the
size of the content and the available width, and wrap their content if 
the available width is

reduced.


Do you *need* the floats? If not, look at CSS3 flex-box.


It's not supported yet though is it by Internet Explorer?

Interestingly, setting maximum-width to a % value for the floats gives me 
what I am looking for to a certain degree.


Thanks,
Stephen 




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] Wrapping text before float drop

[Philip TAYLOR (Webmaster, Ret'd)]

Chris F.A. Johnson wrote:


Use a table.

If the relationship between them is such that they must be side by
side, then a table is the correct element to use.


Two columns must be side-by-side, Chris, yet the received
wisdom is that a table is an inappropriate way of presenting
such material, both because it compromises accessibility
and because the semantics of  are inappropriate to
something that is not fundamentally tabular in nature.

I have exactly the same requirement (except in my case it is
the second column that I would like to shrink as the window narrows),
and I too am keen to learn of a clean CSS-based solution.

Philip Taylor


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] Wrapping text before float drop

[Russ Weakley]

> 
> Think of how two columns work in a table, when they have no specified width. 
> They adjust to the size of the content and the available width, and wrap 
> their content if the available width is reduced.
> 
> This should be easy in CSS, no?


The simple answer is that floats are not ideal in this situation. 

There are three ways you 
could solve this problem - but as Hassan mentions, they are best done without 
using "float". All three solutions may present issues in older versions of IE. 
Without knowing exactly what you are trying to achieve, it is hard to recommend 
one of these solutions.

-
Option 1 - display: table, display: table-row, display: table-cell
-


For example, you could make the two containers operate like table cells. I am 
not really a fan of this approach, but it would give you the behaviour you are 
looking for.



-
Option 2 - columns
-


-
Option 3 - Flexible Box
-
As Hassan mentioned, you could use the flexible box module as a solution



Not sure if any of these help...
Russ





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] Wrapping text before float drop

[Chris F.A. Johnson]

On Thu, 3 Nov 2011, Stevio wrote:


If I have two floats side by side, both are floated left as follow:

.myfloat{
float:left;
}

and both contain text as follows:

Longer amount of text. Longer amount of text. Longer 
amount of text. Longer amount of text.

Small amount of text.

Is there any way to prevent the second div from dropping below the first div 
when the viewport is narrowed, without specifying widths for either of the 
floats?


What I would like is for the text in the first div to wrap before the second 
float drops below the first. Is this possible without using widths?


   Use a table.

   If the realtionship between them is such that they must be side by
   side, then a table is the correct element to use.

--
   Chris F.A. Johnson, 
   Author:
   Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
   Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] Wrapping text before float drop

[Hassan Schroeder]

On 11/3/11 11:43 AM, Stevio wrote:

I'm trying to avoid using widths, if possible, so the divs can adjust to the 
size of the
content, but wrap text before float drop occurs.

Think of how two columns work in a table, when they have no specified width. 
They adjust to the
size of the content and the available width, and wrap their content if the 
available width is
reduced.


Do you *need* the floats? If not, look at CSS3 flex-box.

--
Hassan Schroeder - has...@webtuitive.com
webtuitive design ===  (+1) 408-621-3445   === http://webtuitive.com
http://about.me/hassanschroeder
twitter: @hassan
  dream.  code.


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] Wrapping text before float drop

[Stevio]

I'm trying to avoid using widths, if possible, so the divs can adjust to the 
size of the content, but wrap text before float drop occurs.


Think of how two columns work in a table, when they have no specified width. 
They adjust to the size of the content and the available width, and wrap 
their content if the available width is reduced.


This should be easy in CSS, no?



- Original Message - 
From: "Patrick H. Lauke" 

Sent: Thursday, November 03, 2011 6:08 PM

Not tested, but I'd start with a min-width:50% (with caveat that if I 
remember right, IE6 and below doesn't support min/max widths) 




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

[WSG] Re: WSG Digest (Out of office reply)

[Claire Helme]

I will be out of the office on Thursday 3rd November with limited access to 
emails. 

I will respond to your email when I return on Friday 4th.

Kind regards,
Claire Helme

>>>  11/04/11 05:02 >>>

*
WEB STANDARDS GROUP MAIL LIST DIGEST
*


From: "Stevio" 
Date: Thu, 3 Nov 2011 17:52:45 -
Subject: Wrapping text before float drop

If I have two floats side by side, both are floated left as follow:

.myfloat{
float:left;
}

and both contain text as follows:

Longer amount of text. Longer amount of text. Longer 
amount of text. Longer amount of text.
Small amount of text.

Is there any way to prevent the second div from dropping below the first div 
when the viewport is narrowed, without specifying widths for either of the 
floats?

What I would like is for the text in the first div to wrap before the second 
float drops below the first. Is this possible without using widths?

Thanks.
Stephen 


**
Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
**





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] Wrapping text before float drop

[Patrick H. Lauke]

On 03/11/2011 17:52, Stevio wrote:

If I have two floats side by side, both are floated left as follow:

.myfloat{
float:left;
}

and both contain text as follows:

Longer amount of text. Longer amount of text.
Longer amount of text. Longer amount of text.
Small amount of text.

Is there any way to prevent the second div from dropping below the first
div when the viewport is narrowed, without specifying widths for either
of the floats?

What I would like is for the text in the first div to wrap before the
second float drops below the first. Is this possible without using widths?


Not tested, but I'd start with a min-width:50% (with caveat that if I 
remember right, IE6 and below doesn't support min/max widths)



--
Patrick H. Lauke
__
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]

www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com | http://flickr.com/photos/redux/
__
twitter: @patrick_h_lauke | skype: patrick_h_lauke
__


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

[WSG] Wrapping text before float drop

[Stevio]

If I have two floats side by side, both are floated left as follow:

.myfloat{
float:left;
}

and both contain text as follows:

Longer amount of text. Longer amount of text. Longer 
amount of text. Longer amount of text.

Small amount of text.

Is there any way to prevent the second div from dropping below the first div 
when the viewport is narrowed, without specifying widths for either of the 
floats?


What I would like is for the text in the first div to wrap before the second 
float drops below the first. Is this possible without using widths?


Thanks.
Stephen 




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***