Digital Web Magazine

The web professional's online magazine of choice.

Web Design 101: Floats : Comments

By Virginia DeBolt

September 10, 2007

Comments

mark rushworth

September 11, 2007 1:50 AM

remember not to use floats for everything as display:inline is often better for certain things!

Milo

September 11, 2007 7:49 AM

Examples 5, 6, and 7 don’t work in IE7.

Milo

September 11, 2007 7:54 AM

And for good reason: 25% width + 75% margin + border > 100%

Virginia DeBolt

September 11, 2007 11:45 AM

Hi Milo,
You pointed out an issue in IE7 that I didn’t notice in Firefox. Thanks for mentioning it. However, as you pointed out in your second comment, a minor adjustment in percentages, perhaps

#sidebar { border: thin solid #00C; width: 22%; margin-left: 75%;}

would be enough to fix the problem.

The principle mentioned for creating columns using a combination of widths, margins, and floats works well. But, as Milo mentioned, keep an eye on your math so you don’t exceed 100%. (Or the width of any containing element, be it measured in percentages, ems, or pixels.)

Darren Moore

September 12, 2007 6:04 AM

I was wondering if anyone could recommend a technology for designing a site, such as php and aspx, that would be easy for me to learn. My knowledge is limited to just html and a very little about CSS. I want a technology that is easier to tweak for search engines since I am going to have to learn it from scratch.

mark rushworth

September 12, 2007 9:28 AM

Easy rule of thumb for x browser css every time is

a: dont use left and right padding or margins on elements with a width (vertical is fine) as ie/ff render that different; and

b: borders render inside on one browser and outside on another so be aware of this

once you know those 2 simple rules you should never need to use a box model hack again!

Carolyn Wood

September 12, 2007 1:28 PM

Darren,
HTML and CSS are approximately twelve kajillion times easier to learn than PHP and ASP. They are the basics for building a site, for updating a site, and for tweaking for search engines.

Virginia DeBolt

September 12, 2007 3:22 PM

Darren,
Carolyn is right. The basics are what help you with SEO: text is what the search engines index. Beyond the basics, you could start with one of the more useful scripting languages like JavaScript or PHP and work up from there.

Jina Bolton

September 12, 2007 3:46 PM

Use a float, kill a kitten. ;)

michael

September 12, 2007 8:50 PM

“When floating any element, you may want to assign a width to it, unless you want the contents to shrink-wrap.’

Actually, that’s not quite correct or at least not clear. Floats need a width, either an explicit declared width or an implicit one taken from an object like an image with an explicit width.

AdamP

September 14, 2007 8:35 AM

I think it’s worth considering the positioniseverything easy clearing option; overflow:auto isn’t all good, I’ve encountered buggy-ish behaviour in FFox & IE. For example Ffox will give an element with overflow:auto a tabindex which can create accessibility issues. I’ve used both methods successfully but both require workarounds so I don’t think it’s a good idea to champion one over the other . . .

Virginia DeBolt

September 17, 2007 4:36 PM

Adam,
I don’t want to leave the impression that I’m condeming the easy clearing method. It works. I just happen to prefer a method with the fewest possible moving parts.
Virginia

AdamP

October 3, 2007 2:03 AM

I appreciate that Virginia, apologies if my above comment was a bit heavy-handed. I agree that simpler is, 99% of the time, better but just wanted to point out that overflow:auto is not without it’s flaws. I’ve been doing a bit of digging around this recently and have found that overflow:hidden actually works as well in certain scenarios and doesn’t create the tabIndex problem in Ffox . . .

Jeff C

October 18, 2007 10:03 AM

Thanks very much for this article. Very informative and well written.

Wanderer

October 20, 2007 12:02 PM

Very helpful. Thanks.

Paul

October 21, 2007 7:43 AM

Re:Michael on Sep 12 “Floats need a width, either an explicit declared width or an implicit one taken from an object like an image with an explicit width.”

I’m afraid you are incorrect in your statement and floats do not need an explicit width and certainly do not especially need to take their width from replaced elements like images.

Without a width defined (i.e. width:auto) floats will shrink-wrap their content (whatever that may be) and do not need an explicit width defined.

Here is the entry in the cSS2.1 specs

http://www.w3.org/TR/CSS21/changes.html#q57

Just thought it needing clearing up as it is a common mistake.

Ralph

February 13, 2008 7:23 AM

Thank you for your great article. Sometimes a little help will solve a unnecessary problem with the layout of a webside ;)

from dresden/ germany

Ralph

F

June 22, 2008 2:33 PM

Ooh, that was a helpful article; nothing like a back-to-basics to pick up on what one missed the first time round. Jolly good!

marlene

June 30, 2008 10:44 PM

Your three column float article saved my life! I was about to tear my hair out because I couldn’t get my right column to stop moving when I added content to the center column. I had been working on it for two days prior and with your help, I had it working in about 10 minutes. A bit of tweaking after that and I got everything positioned as I wanted. The only thing I didn’t like was the footer seemed to be attached to the bottom of the center column. I removed the footer background color, added some top padding to it, and now it appears as if it’s on it’s own. Thanks so much for your article!!

marlene – Wisconsin/USA

Sorry, comments are closed.

Media Temple

via Ad Packs