How To Fix CSS Float Issues

Webmaster Articles and Tools

Articles Area
	Home
	Browse Articles
	Search Articles
	Submit/Edit Articles
	Get RSS Feeds
	Free Articles Content
	Most Viewed
	Latest Articles
	Most Emailed
	Articles Rating

Popular Articles
	Installing PhpBB On
	What Is PHPBB All Ab
	How To Decide On A D
	Why Blogs Have Under
	Web Design ,Will Vis

Latest Articles
	Go Further With Cust
	Hiring Drupal Specia
	Why Hiring A Drupal
	Choosing & Using Dru
	WEB DEVELOPMENT AND

For Publishers
	Free Email Alert
	Manage Subscriptions
Guidelines
	Author
	Publishers
	Terms & Conditions
Advertise Here
	Contact Us to Advertise

Home \| Webmaster \| Web Development \| How To Fix CSS Float ... How To Fix CSS Float Issues Submitted by Sameep on 2007-10-11 and viewed 142 times.

Rate This Article |

Add Comments |

Send To Friends|

View Comments (0)

Publisher |

Download as PDF

There are 2 CSS Float issues that tend to crop up during website design and testing - the object floating outside of parent container and float Peekaboo Bug / IE Float Doubled Margin Bug. Here's how to fix them.

CSS is great. On somedays I'd go so far as to say it's a lifesaver. But every now and then you'll encounter a CSS issue that will drive you crazy. In this case we'll talk about two of the more common issues when using the float property to create your layout. For those of you who're new to CSS, Float is a CSS property that allows you to align your elements, such as DIVs, to create website layouts. The values for Float include Left, Right and None. You can use Floats to align elements and if done properly you can do in such a way that it's dynamic -- almost fluid. Let's say you need to create an image gallery. Your idea is to place 4 images on each line, but after you place the first image the second image goes to the next line. I'll admit in the past I used to use negative values to align my images so that the second image would show up next to the first one using the margin-left, right, top, bottom property. I even considered using tables, but opted to use negative values instead. There's nothing wrong with using negative margin property, but not when there's a better solution for it, such as using floats. If you apply Float to those images then they'll align in one row, then you can continue to add more images using the float property and you wouldn't have to worry about whether they'd line up or not because the float property will recognize that there's too many elements on this line and it will push the images to the next line. But what if you're using Floats for your website layout, for your divs and not just the images. There are 2 main issues that you'll face with Floats. Let's say you have three elements. Parent1(website's main container), Child1(left navigation bar), an

d Child2(content area). Parent1 is the main div container and your goal is to float the child divs side by side sort of like having a left navigation area and a right content area. Sounds great. You've set your parent1's height to auto, and you've set child1 and child2's height as auto. But once you open and view it in a webpage the parent element's height is only 1 or 2pixels in height, the child elements seem to look like they're floating above the parent container, and the parent container doesn't seem to recognize the div's height. (see test link 1 on website). No worries, here is an easy solution for it. Add overflow:auto; for the CSS of the parent container and it will automatically recognize the floats and will increase in height so that it appears that the floats are part of the parent container just as you wanted. Wow all that in one line. But don't forget there's still one more Float issue. The second issue is more of a cross browser compatibility issue with floats, but still as important. If you try to Float for ex: three images to the left and are using margin property, then sometimes the first container that floats will have double the margin in Internet Explorer. Welcome to the Float Peekaboo Bug / IE Float Doubled Margin Bug. That's right if you've tried to Float an element and use any kind of margin then you'll notice that it will double the margin in IE. I'm sure there are some decent hacks, but there's an easy way to fix this in CSS. The Float Margin Killer. In the CSS for that container add display:inline I don't know why but for some reason this property seems to fix the double margin property. That's it? Yes that's it. Now you can start using floats.

Article Source: http://ateau.com/

Article Tags: houston website design| css| float|
Bookmark This Articles: del.icio.us * Digg it * Furl * reddit * Spurl * Yahoo MyWeb

Sam is the founder of Netlyte Houston website Design, A Website Design firm that's geared specifically for building websites for Businesses. Websites that have generated real results such as increase in newsletter sign ups to increase in sales. Plus all of their services are backed by a 100% Guarantee.

Web publishing

Web Development and Design in London: Using Divs versus using Tables.

Seven Social Network Script Reviews

What Does Your Customer Really Want?

Finding The Best PHP Dating Script Online

Tips To Make Your Website Load Faster

An Introduction To Content Management Systems

What CMS Tools Does Your Business Need?

Thinking About Using A Website Template?

Purpose of Social Network Community Software

Essential Components for Software for Social Networking

Do You Need Social Networking Software?