Re: [WSG] Best way to clear a float
re -> using the 'clearfix' fix... as a way of clearing floats by
"not adding any additional markup"
i've always thought that argument was a bit of a stretch. You are
adding extra markup - and its hardcoded presentational markup. What
happens when you have class="clearfix" all through your code and then
you have a bit of a design makeover and some areas that were
previously clearing floats are now doing something different? not only
do you have to change the css, you've also got to change html to move
some of the "clearfix" classes around.
As others have said there's not one best solution - it'll depend on
your situation.
Using divs that are already there to do the clearing is, i think,
best. My second favourite is using a (*if* its a meaningful
separation of content) and then applying
{clear:both;visibility:hidden} to the to do the clearing.
as a last resort if i had to add some extra markup to do it, i'd
favour an empty clearing div over an extra class on a parent div (the
clearfix method). Yeah its a little dirty, but in some cases i've
found its easier to maintain when handed over to other
teams/developers/cowboys.
just my 2c :)
pete ottery
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Best way to clear a float
This is an interesting discussion, I have always used on the page and then put
.cleardiv {height: 1em; clear:both;} in the style sheet. Not sure if this is
the best way, its seemed to work well without testing it too rigorously.
I've definitely got some new ideas now to try out though.
Tim
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Thierry Koblentz
Sent: Tuesday, 13 November 2007 9:04 AM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] Best way to clear a float
> On Behalf Of John Faulds
>> *Sometimes* I find this works:
>> #parent {overflow: auto;}
> You need to combine that with a width for it to work in IE.
I think it is a hasLayout issue, so it is possible to make it work without
having to declare a width (using zoom:1 for example).
> You might also
> find in some situations that you need to use oveflow: hidden as auto will
> create scrollbars.
I agree. The thing to watch for though is if there is a IE min-height hack
(_height) involved...
--
Regards,
Thierry | http://www.TJKDesign.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Best way to clear a float
> On Behalf Of John Faulds
>> *Sometimes* I find this works:
>> #parent {overflow: auto;}
> You need to combine that with a width for it to work in IE.
I think it is a hasLayout issue, so it is possible to make it work without
having to declare a width (using zoom:1 for example).
> You might also
> find in some situations that you need to use oveflow: hidden as auto will
> create scrollbars.
I agree. The thing to watch for though is if there is a IE min-height hack
(_height) involved...
--
Regards,
Thierry | http://www.TJKDesign.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Best way to clear a float
*Sometimes* I find this works:
#parent {overflow: auto;}
You need to combine that with a width for it to work in IE. You might also
find in some situations that you need to use oveflow: hidden as auto will
create scrollbars.
--
Tyssen Design
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Best way to clear a float
Why not just use clearfix?
On Nov 12, 2007 12:15 PM, David Hucklesby <[EMAIL PROTECTED]> wrote:
>
> On Mon, 12 Nov 2007 09:58:37 -0600, Likely, James A. wrote:
> > Hello,
> >
> > I am curious to see how others clear floats.
> >
>
> *Sometimes* I find this works:
>
> #parent {overflow: auto;}
>
> This does require thorough testing, however.
>
> Another simple method is the one Mohamed described - floats
> always contain floats.
>
> Others suggested here are also good. It depends on your design
> as to which one works best. As always, design is largely a matter of
> compromise.
>
> Cordially,
> David
> --
>
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
>
>
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Best way to clear a float
On Mon, 12 Nov 2007 09:58:37 -0600, Likely, James A. wrote:
> Hello,
>
> I am curious to see how others clear floats.
>
*Sometimes* I find this works:
#parent {overflow: auto;}
This does require thorough testing, however.
Another simple method is the one Mohamed described - floats
always contain floats.
Others suggested here are also good. It depends on your design
as to which one works best. As always, design is largely a matter of
compromise.
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Best way to clear a float
On Mon, 12 Nov 2007 09:58:37 -0600, Likely, James A. wrote:
> Hello,
>
> I am curious to see how others clear floats.
>
*Sometimes* I find this works:
#parent {overflow: auto;}
This does require thorough testing, however.
Another simple method is the one Mohamed described - floats
always contain floats.
Others suggested here are also good. It depends on your design
as to which one works best. As always, design is largely a matter of
compromise.
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Best way to clear a float
Hi Jamie,
Easy clear is my current method of clearing also.
The only problem is that your css does not then validate (as
inline-block is from the css2.1 spec)
"This is a W3C Candidate Recommendation, which means the specification
has been widely reviewed and W3C recommends that it be implemented. It
will remain Candidate Recommendation at least until 20 December 2007.
<http://www.w3.org/TR/CSS21/#crec> A test suite and a report on
implementations will be provided before the document becomes a Proposed
Recommendation." Badger
Am I correct in thinking that once it becomes a Proposed Recommendation
the validator will be altered and the css will then validate?
It would be nice to have validating css again :-)
Ant
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Jamie Stewart
Sent: 12 November 2007 16:15
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Best way to clear a float
My preference would be to clear floats through the CSS and not through
adding in any additional markup. The code for this is below, so any two
elements being floated to sit side by side should be put in a container
with the class .clearfix.
I use this approach purely because I view this as a presentation issue
and not a reason to add a new element to your HTML structure. I hope
this helps and here is a link explaining the below example
http://www.positioniseverything.net/easyclearing.html
Cheers
Jamie Stewart
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
On 12/11/2007, Likely, James A. <[EMAIL PROTECTED]> wrote:
Hello,
I am curious to see how others clear floats.
Here is the problem. Div one and two float left and take 50% of the
screen. Content is to go below the two floats.
one
two
Content
In the past I would use:
one
two
What method are you using to make this work in IE?
Thanks
Jamie
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Best way to clear a float
You don't have to even clear anything if you the parent div is floated
right such:
one
two
Content
div#parent {float:left}
div#one {float:left}
div#two {float:left}
that would work just fine without need to any clear at all!
M. Jama
big:interactive
91 Princedale Road
Holland Park
London W11 4NS
Email: [EMAIL PROTECTED]
Direct: +44 (0)20 7313 2262
www.biggroup.co.uk
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Palle
Sent: 12 November 2007 16:19
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Best way to clear a float
Well, in my opinion - it's alway best practice to use CSS, e.g.
one
two
Content
...
div#one {float:left}
div#two {float:left}
div#content {clear:both}
That should do the trick for you. :)
On Nov 12, 2007 4:58 PM, Likely, James A. <[EMAIL PROTECTED]> wrote:
>
>
>
> Hello,
>
> I am curious to see how others clear floats.
>
> Here is the problem. Div one and two float left and take 50% of the
screen.
> Content is to go below the two floats.
>
> one
> two
> Content
>
> In the past I would use:
>
> one
> two
>
>
> What method are you using to make this work in IE?
>
> Thanks
>
> Jamie
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Best way to clear a float
On 12-Nov-07, at 9:28 PM, Likely, James A. wrote: I am curious to see how others clear floats. Jamie, I often use this method [1]. It seems to work well, and far better CSS-brains than myself have recommended it. Best, - Rahul. [1] http://www.positioniseverything.net/easyclearing.html *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Best way to clear a float
Hello James, Maybe you can do this: Left Right hope this can help you. "Likely, James A." <[EMAIL PROTECTED]> wrote: Best way to clear a float Hello, I am curious to see how others clear floats. Here is the problem. Div one and two float left and take 50% of the screen. Content is to go below the two floats. one two Content In the past I would use: one two What method are you using to make this work in IE? Thanks Jamie --- best regards, Gage Batubara web designer phone : +62 856 154 02 89 www.sevenova.net www.37sheet.com mail #1 : [EMAIL PROTECTED] mail #2 : [EMAIL PROTECTED] __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Best way to clear a float
Well, in my opinion - it's alway best practice to use CSS, e.g.
one
two
Content
...
div#one {float:left}
div#two {float:left}
div#content {clear:both}
That should do the trick for you. :)
On Nov 12, 2007 4:58 PM, Likely, James A. <[EMAIL PROTECTED]> wrote:
>
>
>
> Hello,
>
> I am curious to see how others clear floats.
>
> Here is the problem. Div one and two float left and take 50% of the screen.
> Content is to go below the two floats.
>
> one
> two
> Content
>
> In the past I would use:
>
> one
> two
>
>
> What method are you using to make this work in IE?
>
> Thanks
>
> Jamie
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Best way to clear a float
My preference would be to clear floats through the CSS and not through
adding in any additional markup. The code for this is below, so any two
elements being floated to sit side by side should be put in a container with
the class .clearfix.
I use this approach purely because I view this as a presentation issue and
not a reason to add a new element to your HTML structure. I hope this helps
and here is a link explaining the below example
http://www.positioniseverything.net/easyclearing.html
Cheers
Jamie Stewart
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
On 12/11/2007, Likely, James A. <[EMAIL PROTECTED]> wrote:
>
> Hello,
>
> I am curious to see how others clear floats.
>
> Here is the problem. Div one and two float left and take 50% of the
> screen. Content is to go below the two floats.
>
> one
> two
> Content
>
> In the past I would use:
>
> one
> two
>
>
> What method are you using to make this work in IE?
>
> Thanks
>
> Jamie
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Best way to clear a float
I used br clear: both until I read somewhere authoritive that it's better to use a div. So I started using a div and IE reared its ugly head on occasion. Georg from Norway gave me an IE bug killer (clear: both in CSS) and I've had no more problems. Hello, I am curious to see how others clear floats. Here is the problem. Div one and two float left and take 50% of the screen. Content is to go below the two floats. one two Content In the past I would use: one two What method are you using to make this work in IE? Thanks Jamie *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Best way to clear a float
Hello, I am curious to see how others clear floats. Here is the problem. Div one and two float left and take 50% of the screen. Content is to go below the two floats. one two Content In the past I would use: one two What method are you using to make this work in IE? Thanks Jamie *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
