Web Design 101: Floats : Comments
September 10, 2007
Comments
remember not to use floats for everything as display:inline is often better for certain things!
Examples 5, 6, and 7 don’t work in IE7.
And for good reason: 25% width + 75% margin + border > 100%
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.)
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.
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!
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.
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.
Use a float, kill a kitten. ;)
“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.
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 . . .
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
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 . . .
Thanks very much for this article. Very informative and well written.
Very helpful. Thanks.
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.
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
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!
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
You can use this
feed to keep up with the comments made on this article.