| CSS is great. On somedays I'd go so far as to say | | | | Child2(content area). Parent1 is the main div container |
| it's a lifesaver. But every now and then you'll | | | | and your goal is to float the child divs side by side |
| encounter a CSS issue that will drive you crazy. | | | | sort of like having a left navigation area and a right |
| In this case we'll talk about two of the more | | | | content area. Sounds great. |
| common issues when using the float property to | | | | You've set your parent1's height to auto, and you've |
| create your layout. | | | | set child1 and child2's height as auto. But once you |
| For those of you who're new to CSS, Float is a CSS | | | | open and view it in a webpage the parent element's |
| property that allows you to align your elements, such | | | | height is only 1 or 2pixels in height, the child elements |
| as DIVs, to create website layouts. The values for | | | | seem to look like they're floating above the parent |
| Float include Left, Right and None. You can use Floats | | | | container, and the parent container doesn't seem to |
| to align elements and if done properly you can do in | | | | recognize the div's height. (see test link 1 on website). |
| such a way that it's dynamic -- almost fluid. | | | | No worries, here is an easy solution for it. |
| Let's say you need to create an image gallery. Your | | | | Add overflow:auto; for the CSS of the parent |
| idea is to place 4 images on each line, but after you | | | | container and it will automatically recognize the floats |
| place the first image the second image goes to the | | | | and will increase in height so that it appears that the |
| next line. | | | | floats are part of the parent container just as you |
| I'll admit in the past I used to use negative values to | | | | wanted. Wow all that in one line. |
| align my images so that the second image would | | | | But don't forget there's still one more Float issue. |
| show up next to the first one using the margin-left, | | | | The second issue is more of a cross browser |
| right, top, bottom property. I even considered using | | | | compatibility issue with floats, but still as important. If |
| tables, but opted to use negative values instead. | | | | you try to Float for ex: three images to the left and |
| There's nothing wrong with using negative margin | | | | are using margin property, then sometimes the first |
| property, but not when there's a better solution for | | | | container that floats will have double the margin in |
| it, such as using floats. | | | | Internet Explorer. |
| If you apply Float to those images then they'll align in | | | | Welcome to the Float Peekaboo Bug / IE Float |
| one row, then you can continue to add more images | | | | Doubled Margin Bug. |
| using the float property and you wouldn't have to | | | | That's right if you've tried to Float an element and |
| worry about whether they'd line up or not because | | | | use any kind of margin then you'll notice that it will |
| the float property will recognize that there's too | | | | double the margin in IE. |
| many elements on this line and it will push the images | | | | I'm sure there are some decent hacks, but there's an |
| to the next line. | | | | easy way to fix this in CSS. The Float Margin Killer. In |
| But what if you're using Floats for your website | | | | the CSS for that container add display:inline I don't |
| layout, for your divs and not just the images. | | | | know why but for some reason this property seems |
| There are 2 main issues that you'll face with Floats. | | | | to fix the double margin property. |
| Let's say you have three elements. Parent1(website's | | | | That's it? Yes that's it. Now you can start using |
| main container), Child1(left navigation bar), and | | | | floats. |