Comments on: float

By: Aurea F Maldonado

Aurea F Maldonado — Wed, 14 Nov 2018 16:53:07 +0000

Is it just me or is there a mistake in the picture under “Clearing the Float
Float’s sister property is clear. An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float. Again an illustration is more helpful than words:” The Sidebar (float:right) should read (float:left). The Sidebar is shown to be shifted to the left. Please excuse if I’m wrong.

By: Deb Banerjee

Deb Banerjee — Tue, 29 Aug 2017 09:13:59 +0000

I’m learning CSS floats and positioning and this is the best article I’ve found.
It has cleared all my doubts about float and clear properties.

Thanks a lot for this tutorial Sara.

By: Rodel M. Genobili

Rodel M. Genobili — Tue, 18 Oct 2016 02:49:45 +0000

cool

By: cycleops

cycleops — Mon, 05 Sep 2016 20:39:13 +0000

This article and site is a great find.
Just completed my first site using bootstrap and had to play around with the float of a image.

By: Lekha Menon

Lekha Menon — Wed, 20 Jul 2016 03:23:07 +0000

Thanks a lot! That’s the most coherent explanation of floats ever!

By: bob

bob — Thu, 03 Mar 2016 22:01:31 +0000

Perfect article! You have a gift and should be teaching on a university!

By: Tyler Gillispie

Tyler Gillispie — Thu, 03 Mar 2016 18:57:11 +0000

Awesome article!

By: Dan Allen

Dan Allen — Thu, 31 Dec 2015 01:13:10 +0000

The “bewildering” Great Collapse is a flaw in CSS. If it was not a flaw, there would be no need for special explanation. I am disappointed to see the energy of a leading voice in CSS used to rationalize the problem instead of fixing it.

By: klesus

klesus — Thu, 23 Jul 2015 23:48:11 +0000

On thing I'm finding confusing is using floats together with margin on neighboring elements. Let's say you have an image floating left and text inside a div that describe the image, like this:

html:
<img src="someimage.jpg" alt="width size over 100px"/> 
<div>description of image</div>
css:
img {float: left;}
div {margin-left: 100px;}

in this case the div will have 0 margin relative to the image. The only solution I've found is to set the margin on the image pushing neighboring elements away. I'm really interested if there exists other ways to tackle this problem.

By: Anas R.

Anas R. — Thu, 23 Jul 2015 08:15:10 +0000

There's another value, used for paged media, called footnote. It's implemented and works now in PrinceXML.

By: Grateful

Grateful — Wed, 22 Apr 2015 08:53:17 +0000

I have been searching for a way to explain this to my students– you are amazing — thank you for this comprehensive explanation!!!

By: Neil Ormsby

Neil Ormsby — Wed, 26 Mar 2014 12:42:32 +0000

I am having a problem keeping my facebook like/share button in the centre of my webpage.

Can you help me with some css to stop it moving.

My css is :
.fb-like{position:fixed;padding:15px;margin:0 auto}

Regards.
Neil

By: Mark

Mark — Thu, 09 Jan 2014 08:04:34 +0000

Float vs. Floating... Can a 'float' trick satisfy text wrap around something floating? Floating is where, as page scrolls up and down, something is always visible, floating in top right corner and stuff wraps around it? Compare here to another something floated or stuck top left corner of page... Note that since IE11 won't float aside unless float is styled inline, we use tags div.aside)(aside to help style the float. Layout is simple. Element article ( relative hugs all content, fills page. Element section ( - wraps div.aside#left nicely, but gets buried under div.aside#right. Say we use two aside elements. Title block is div.aside#left and ad floater is div.aside#right. We code aside ( border:1px position:relative width:100px. Top left float is div.aside#left ( float:left margin-right:1em. Floater is div.aside#right ( position:absolute *ie6* position:fixed right:1em top:1em. Now, we need 'ad aside' always visible, top right corner of browser window! How can any variant of aside use float:right and not stick to top-of-page... and (visible top right corner as we scroll down) how can content wrap around our floater?

By: elmoluz

elmoluz — Tue, 01 Oct 2013 14:35:24 +0000

Thank you for your most comprehensive CSS knowledge.
I wish you the best!

elmoluz

By: Diane

Diane — Thu, 22 Aug 2013 13:32:30 +0000

I am wondering in the grid type layout where I want two rows of three boxes each is float left or inline-block a better option? Not ready to try a grid yet ;)