|
|
 |
|
Testimonials
"WebsiteDesignHouston has exceeded our expectations in terms of development, customer service, pricing and turn around time."
Johnny Palmer,
CEO & Founder
BlackEntrepreneurship.com
"I just wanted to take a moment to sincerely thank you for the excellent web design work you have done for Christopher’s Vintage Shave. The level of professionalism and promptness to acute situations has been very expressive and appreciated. As you know, business is very dynamic and constantly changing to meet the latest and greatness demands. Thank you for working with me on this project and we look forward to the next. "
Christopher Dickerson,
President & Founder
Christopher's Vintage Shave
"We still can't believe how fast the team at Website Design Houston completed our project. It literally took them 24 hours to provide a prototype of our complete e-commerce site. We are looking forward to future projects with this company."
CarbMed Nutrition
How To Fix CSS Float Issues
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 your website layout. The values 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 want 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 it to the next line.
But what if you were using floats for your website layout, for your divs.
There are 2 main issues that you'll face with floats.
Let's say you have three elements. Parent1, Child1(left navigation bar), and Child2(content area). Parent1 is the main div, and you want to place -- 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).
Don't worry, here is an easy solution for it. It's been known for a while to the more experienced css gurus, but it's time you know the "secret".
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 1 more issue.
The second issue is more of a cross browser compatibility issue with floats, but still as important. If you try to float let's say three images to the left and are using margin property, then 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 it will double the margin in IE.
I'm sure there are some decent hacks, but I've found that 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.
For more information about CSS visit http://ww.W3Schools.com
Bookmarking links
Furl -
del.icio.us -
Technorati -
BlinkList -
Digg -
Google -
StumbleUpon -
My Yahoo
If you need a website that can finally help you generate real results then Call Us Now to find out more information about our Services: 281-468-7690
