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

• 19 Apr 12
  

  simspace

  css article favorite toread tutorial

  • the div elements don't "stretch" to contain the floated images within them. To look at the situation from the reverse angle, it happens because the floated images "stick out" of the bottom of the div elements.
  • ook closely at Figure 2. The floated image is sticking out of its containing element. We can see this more clearly by adding borders to the paragraphs, as shown in Figure 3.
  • now we can see why it's important that floats stick out of their containing elements.
  • If floats are to be used in creating non-table layouts, then there needs to be a way to make their containing elements stretch around them.
  • Since we want the bottom of the containing element to be placed clear past the bottom of the float, then clear is our answer. We need only insert a block-level element just before the end of the container, and clear it
  • In most browsers, and as defined in CSS2.1, a floated element will expand to contain any floated elements that descend from it.

  • div.item {float: left; border: 1px solid; padding: 5px; width: 60%;} div.item img {float: left; margin: 5px;} 

     

     Note that we've floated both the images and the "item" divs. By setting the width of the divs to be greater than 50%, we ensure that they will never be next to each other, but will instead stack up vertically.
  • However, the hacks discussed thus far are still useful. Suppose you want to put some advisory text underneath the items. In order to keep the text from flowing to the right of the items, we need to insert a clearing hack.
  • The clearing div effectively pushes the normal flow downward, forcing any following content to flow after the cleared element, and therefore after the floated divs.

  7 more annotations...

• 22 Feb 12
  

  david_r_whiting

  css web design html jsna

• 24 Jan 11
  

  sumanthvepa

  css webdesign layout design web tutorial html webdev float floats

• 10 Jan 11
  

  rbc2511

  box model float issue avoidance

• 03 Dec 10
  

  Sirsharky77

  Containing Floats

  css floats tutorial

• 20 Nov 10
  

  HTML_construction CSS Floats

• 18 Nov 10
  

  wayne anderson

  Great example of how to clear a float.

  webDesign css floats layout clear greatResource backup

• 22 Oct 10
  

  amberkrishan

  XHTML_CSS

• 03 Sep 10
  

  Clive Sir

  web design css

• 13 Jul 10
  

  Thomas Deceuninck

  css float webdesign layout floats design web

• 22 Apr 10
  

  Balazs Javor

  inbox

• 29 Jan 10
  

  2003-08-25 Damals war noch nicht bewusst, warum das klappt (BFC/hasLayout)

  css

• 09 Oct 09
  

  makeller63

  css sidenote

• 03 Oct 09
  

  khaled hussein

  CSS

• 17 Sep 09
  

  css float webdesign layout floats

• 25 Aug 09
  

  Frances de Waal

  About how floats and the normal flow relate to each other and how clearing can be used.

  css float clear tutorials

• 

  Richard Webb

  css layout

• 24 May 09
  

  Son Pham

  CSS

• 18 Jan 09
  

  Mindy McAdams

  Tutorial recommended on p. 95 of Cederholm.

  css webdesign mmc4341

• 15 Nov 08
  

  Thomas VG

  CSS

• 07 Nov 08
  

  Yura Yatsuk

  css tutorials webdev tips howto floats

• 01 Nov 08
  

  Bob Carr

  css floats

• 26 Sep 08
  

  juliadesigns

  WebDev CSS positioning float webdesign layout design web

• 06 Aug 08
  

  Ernst Michalek

  html css floats meyer tricks hr clear div delicious

• 16 Jun 08
  

  Maggie Wolfe Riley

  2003 article, uses html instead of xhtml, but still a good reference

  layout code design webdesign hacks css IE

• 23 Apr 08
  

  Ben Barth

  css float webdesign layout floats design web tutorial

• 05 Apr 08
  

  eelirac

  Education General Website design CSS code snippets css

• 27 Mar 08
  

  dvdesigns1099

  floats

  css float

• 18 Feb 08
  

  Claude Brisson

  css float

• 16 Feb 08
  

  Glenn M

  css hacks

• 08 Feb 08
  

  x xx

  css delicious web

• 06 Feb 08
  

  chilliscope

  CSS

• 29 Jan 08
  

  Attila Györffy

  As powerful and useful as they are, floats can make for tricky layout tools. Chances are that you may have seen something like the situation shown in Figure 1, which is accomplished with just two div elements, each with a floated image inside it.

  css float howto webdev

• 15 Jan 08
  

  Marko Prljic

  css

• 14 Jan 08
  

  clark updike

  css float webdesign howto

• 28 Sep 07
  

  Eric Jorgenson

  css float layout floats design webdesign articles article tips tutorial howto layouts positioning reference

• 27 Sep 07
  

  P M

  css float

• 01 Aug 07
  

  Suzanne Nagy

  Floats

  css webdesign

• 25 Jun 07
  

  Mattias Wirf

  As powerful and useful as they are, floats can make for tricky layout tools.

  css design tips

• 31 Mar 07
  

  Regis Zaleman

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

  css float strech images

• 07 Mar 07
  

  Mike Koss

  Nice explanation of float: and clear:, especially as relates to containing floated elements that you want to completely surround the floated element. - Option 1: Append a clear-ing element as the last item in the container. - Option 2: Float the containe

  css design html

• 26 Feb 07
  

  dianaganju

  Web

• 16 Feb 07
  

  programming web css tips floats

• 11 Feb 07
  

  dean d

  cssfloats cssposition

• 29 Jan 07
  

  wey wang

  By understanding how floats and the normal flow relate to each other, and understanding how clearing can be used to manipulate the normal flow around floats, authors can employ floats as a very powerful layout tool.

  css floats web design hacks layout

• 04 Jan 07
  

  Effie Nadiv

  float css Floats fromdelicious

• 19 Dec 06
  

  Esther S

  css

• 21 Nov 06
  

  angel none

  float css

• 15 Nov 06
  

  float

• 07 Nov 06
  

  Ivana Vasilj

  As powerful and useful as they are, floats can make for tricky layout tools. Chances are that you may have seen something like the situation shown in Figure 1, which is accomplished with just two div elements, each with a floated image inside it.

  css floats layout

• 06 Nov 06
  

  João Silva

  Artigo acerca de problemas com divs e floats em html e css.

  css design layout webdesign

• 19 Oct 06
  

  Patrick Helmes

  How to fix float issues in CSS

  css webdesign howto float tricks tips hacks

• 02 Oct 06
  

  nmindplus

  float css layout

• 26 Sep 06
  

  Lee Kraus

  CSS Floats

• 25 Sep 06
  

  Tomo Suzuki

  floats css

• 23 Sep 06
  

  Carlos Paramio

  css tutorial

• 07 Sep 06
  

  css design float tutorial

• 06 Sep 06
  

  Turlough McAnespy

  floats css web

• 26 Aug 06
  

  Lindsay Donaghe

  codesnippets css design development floats troubleshooting tutorials web

  • we could remove all of the "clearer" elements and instead write these styles: 

     

    div.item {float: left; border: 1px solid; padding: 5px; width: 60%;} div.item img {float: left; margin: 5px;} 

     

     Note that we've floated both the images and the "item" divs. By setting the width of the divs to be greater than 50%, we ensure that they will never be next to each other, but will instead stack up vertically. This has the result shown in Figure 6. 

     

      Figure 6. Using floats to stretch around floats.
• 18 Aug 06
  

  web design and development

• 25 Jul 06
  

  Kelley Perry

  css float floats images

• 21 Jun 06
  

  anthony wheeler

  While powerful and useful, floats can also be tricky. This article explains them clearly.

  css webdesign

• 20 Jun 06
  

  Anthony Pantekoek

  design css tutorials

• 16 Jun 06
  

  Randall Haney

  css design reference webdesign floats layout

• 13 Jun 06
  

  Scott Girard

  CSS floats wrapping text around images alignment align

• 30 May 06
  

  Marcos Fernández

  css float webdesign design floats layout web

• 25 May 06
  

  Steve Squier

  css webdesign layout webstandards tutorial

• 27 Apr 06
  

  chris campbell

  <div class="clearer">?</div>

  css float webdesign

• 08 Apr 06
  

  Kimberly Watrud

  stylesheets delicious

• 05 Apr 06
  

  infrared

  css tutorial

• 17 Mar 06
  

  Steffen Ørsted

  float css webdesign layout

• 22 Feb 06
  

  Chrys R

  css bugs

• 20 Feb 06
  

  harriyott

  css float layout

• 11 Feb 06
  

  electrasteph

  css floats

• 10 Feb 06
  

  Fogday Studios

  As powerful and useful as they are, floats can make for tricky layout tools. Chances are that you may have seen something like the situation shown in Figure 1, which is accomplished with just two div elements, each with a floated image inside it.

  css

• 06 Feb 06
  

  Michael Barrish

  css floats

• 02 Feb 06
  

  Gianluca Ciralli

  Come impedire alle immagini di eccedere il bordo inferiore del div in cui sono contenute

  css webdesign

• 25 Jan 06
  

  Cedric Weber

  css design howto

• 20 Jan 06
  

  Ron Wiecki

  css design development xhtml

• 17 Jan 06
  

  css

• 16 Jan 06
  

  exhuma

  CSS webdesign

• 31 Dec 05
  

  alvin c

  css howto techniques

• 30 Oct 05
  

  elliot harrison roberts

  Code Eric_Meyer

• 28 Oct 05
  

  Adam Cutler

  consulting spiral CSS_Development_Resources containing floats complex

• 17 Oct 05
  

  David Naughton

  Eric Meyer: 2003-08-25: Complex Spiral

  web-design

• 11 Oct 05
  

  Tobias Gelston

  design css hack

• 02 Aug 05
  

  ericwryan

  web-development

• 12 Apr 05
  

  Hagure Metaru

  css design webdesign float

• 09 Apr 05
  

  beattakeshi

  floats can make for tricky layout tools

  css:info css

• 27 Dec 04
  

  Heinz Wittenbrink

  css properties display float

• 22 Dec 04
  

  Tina McGuire

  IT css ericMeyer float hack web

• 06 Dec 04
  

  andymatic

  css

• 20 Nov 04
  

  Georg Portenkirchner

  CSS

• 27 Aug 04
  

  Pamela Stocks

  design

• 27 Jul 04
  

  don deka

  As powerful and useful as they are, floats can make for tricky layout tools. Chances are that you may have seen something like the situation shown in Figure 1, which is accomplished with just two div elements, each with a floated image inside it.

  css design html

• 20 Jul 04
  

  camryl9

  css

• 09 Jul 04
  

  Dan Buhler
• 18 May 04
  

  Yvonne L

  Floats explained

• 17 Feb 04
  

  Chu Yeow Cheah

  CSS

• 16 Feb 04
  

  Naoko McCracken

  css

Page Comments

• 
  Lindsay Donaghe on 2006-08-26
  How to fix the "stair stepping" problem of adjacent floating divs/images and to force their containers to stretch so that the floating elements don't extend past them.

Would you like to comment?

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