understanding css float

[jontywagener]

hi guys,

i need some help in understanding how the float works in css. i see that quite a few people use it for layout and it seems to work. i can float sections but i cant have anything below them because it is not displayed correctly (usually underneath the floated section).

is there a way to make float work?
please help.

[PaulClark]

Hi JW!

First off, can I say (in a nice way!) this is really a rather fundamental question to look for a quick answer to in a forum. If you're having trouble with the basic concept of floats, you're probably at an early enough stage in your learning of CSS that the best thing to do is get a good introductory book and work through it. My favourite for beginners is 'Head First HTML with CSS and XHTML', by Elisabeth and Eric Freeman. Don't be put off by the title, thinking you already know HTML: implementing designs with CSS is about developing your HTML and CSS in concert; you need to understand how both interact.

Having said that, I'll have a go at answering your specific question:

• Web pages (HTML) are just text. It is the browser that renders the web page and makes it something you might like to look at.
• Browsers have default rules about how to render stuff like Lists, Paragraphs, Headings etc.
• CSS provides additional instructions that the browser takes note of (with greater or lesser accuracy) when rendering the page. You can override a lot of the default rendering with CSS.
• One of the most fundamental concepts in rendering a page is 'flow'. This means that the browser starts at the top of the HTML file and, barring any other instructions in the HTML or CSS, lays the page out from top to bottom, following two rules:

1. 'Block' elements, such as Paragraphs and DIVs go below one another down the page.
2. 'Inline' elements, such as Links, SPANs and IMGs go one after another across the page, until they reach the page width and wrap onto the next line.

• 'Float' is most usually applied to block elements, when we want to 'break the rules' and put two block elements next to eachother across the page, contrary to the normal rendering rules.
• When you float an element, you take it out of the normal flow of the page. This means that other block elements can go next to it, but also that from the perspective of the page as a whole it now has no height, allowing other things to go beneath it.
• You can force a later element to 'look for' and go below floated elements by applying the 'clear' property (clear:left; clear:right; or clear:both; ).

So, two practical rules:

1. To make sure following elements 'clear' the bottom of your float, use 'clear'.
2. To make sure a containing element (a DIV, usually) expands vertically to contain a floated element, the containing element must also be floated.

Have fun, and do take a look at that book. It will help you loads in getting up to speed.

[jontywagener]

ok, thanks. i understand it a bit better. sorry for creating such a vague post :)

i will have a look at that book also.

J

[rossable]

if you need to print a web page though floats will break it.
i avoid them whenever possible, or write a special print section in my CSS that hides the floats that don't matter for print (ie. navigation, adds, etc.)

[flashwiz]

Hi Jonty,

There are a number of places for you to learn more about floats in CSS. They are not as complicated as they may first seem. One of the best places i can recommend in the first instance is Listomatic: css.maxdesign.com.au - CSS resources and tutorials for web designers and web developers

This should give you a good insight into how floats work, unfortunately some of the information you have been given is incorrect (sorry rossable) floats will NOT break when printing.

Any problems just shout..

[tommylogic]

Originally Posted by flashwiz

... unfortunately some of the information you have been given is incorrect (sorry rossable) floats will NOT break when printing.

Any problems just shout..

WOW!!! Talk about laying down the gauntlet. You are very correct though.

In Ross's defense, I believe if you float incorrectly or don't clear floats properly, that it won't always print as displayed. On the same note, it also won't always view in certain browsers as expected either..

[flashwiz]

But if you dont clear floats properly then they wont show on the site correctly either, so you should know before it comes to printing that there is a problem :-)

Although didnt mean it in the way it maybe comes across... just didnt want the new person learning to be given wrong info.. :-) no offence Rossable...

[jontywagener]

thanks for the link flashwiz.

[flashwiz]

No worries... im sure you will find lots of simple easy to understand tutorials in there...

Any problems, shout!