Containing Floats (Complex Spiral Consulting) - The Diigo Meta page

• 20 Dec 11
  

  Cristian Demetriad

  css float layout web floats webdesign design containing

• 09 Nov 11
  

  css webdesign layout

• 18 Oct 11
  

  Leonardo Graterol

  css float layout web

• 05 Oct 11
  

  Anthi Mi

  DDM

• 31 May 11
  

  Luca Cavallotto

  utilizzo di clear:left,both,right

  css float layout

  • So when in the name of all that's good and right would authors want floats to stick out of their containing elements? Simple: in what is historically the most common case for float use. Consider Figure 2, and the basic markup structure that produced it. 

     

      Figure 2. Floating an image, flowing the text. 

     

    <p>  ...text...  <img src="jul31-03-sm.jpg" height="200" border="0" class="picture">  ...text... </p> <p>  ...text... </p>

  • We need only insert a block-level element just before the end of the container, and clear it. Consider: 

     

    <div class="item">  <img src="w6144.gif">  Widget 6144  <br>$39.95  <hr> </div> <div class="item">  <img src="w6145.gif">  Widget 6145  <br>$44.95  <hr> </div> 

     

     Now we apply the following rules to the preceding markup, and get the result shown in Figure 5. 

     

    div.item hr {display: block; clear: left; margin: -0.66em 0;   visibility: hidden;}

  • By ensuring that the hr elements are block-level, part of the normal flow, and cleared, we force the divs to "stretch around" the left-floated images. 

     

     The negative top and bottom margins have the general effect of closing up the space that the hr occupies. However, this effect is not precise, and not necessarily identical across browsers.
  • where a precise clearing effect is needed, authors can use a div instead of an hr
  • div.clearer {clear: left; line-height: 0; height: 0;}  <div class="item">  <img src="w6144.gif">  Widget 6144  <br>$39.95  <div class="clearer">&nbsp;</div> </div>

  3 more annotations...

• 28 Apr 11
  

  web design css tips

• 29 Mar 11
  

  garret

  EricMeyer floats CSS-layout tutorials webdevelopment

• 20 Mar 11
  

  s_m_roberts

  css float layout webdesign floats design web containing

• 13 Mar 11
  

  Ryan Baldwin

  css float

• 11 Mar 11
  

  Tom Lehman

  css design web

• 11 Dec 10
  

  Newman Lanier

  "<div class="clearer">&nbsp;</div>"

  css webdesign layout

• 18 Nov 10
  

  Jesse Bruton

  css float floats containing layout eric myer

• 21 Oct 10
  

  Chris Schär

  css float webdesign layout floats design web tutorial

• 07 Sep 10
  

  Sean Winstead

  css float div layout margin collapse

• 30 Apr 09
  

  Taiye Ogunnigbo

  floats css webdesign divs

• 16 Apr 09
  

  Patricia Rees

  css tutorial Floats clear

• 30 Jan 09
  

  Don St Troy

  css float floats webdev

• 22 Jan 09
  

  Brad Smith

  A quick, easy ref for expanding divs to contain a floated element.

  floats clear hacks reference webdesign

• 09 Jan 09
  

  elvina

  what are floats for.

  css float floats

• 05 May 08
  

  swordsp N/A

  develop web css

• 29 Apr 08
  

  Katharina Andresen

  css floats layout

• 14 Oct 07
  

  Vivek Singh

  css webdesign float layout

• 24 Sep 07
  

  quekshuy Quek

  css tutorial

• 25 Apr 07
  

  Comment bien gérer ses floats par (maître) Eric Meyer

  css float

• 31 May 06
  

  Georg Portenkirchner

  CSS

• 27 Mar 06
  

  Stelios Sfakianakis

  css webdesign layout

• 01 Jan 06
  

  Justin Morrison

  css tutorial del

• 28 Oct 05
  

  Ed Griebel

  css

• 25 Sep 05
  

  Brent Leary

  imported TechStuff css float design layout webdesign

• 01 Sep 05
  

  travis hardiman

  explanation of floats (e.g. float: left; )

  CSS development XHTML

• 18 Jul 05
  

  tjewell

  webDESIGN

• 28 Nov 04
  

  Asi .

  Work - WebDev CSS

• 23 Nov 04
  

  Todd Zimmerman

  CSS reference

Would you like to comment?

Join Diigo for a free account, or sign in if you are already a member.