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. 

<div style="float: left">one</div> 
<div style="float: left">two</div> 
<div>Content</div> 

In the past I would use: 

<div style="float: left">one</div> 
<div style="float: left">two</div> 
<br style="clear: both; /> 
<div>Content</div> 

As this seemed to be the only method to make the clear work in IE. I am
curious to see how others do this and if you are doing it with out using
the <br style="clear:both" /> 

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]
*******************************************************************

Reply via email to