Graphic Design shadow to enhance presentation of images.
Graphic Design shadow to enhance presentation of images.

Web Design - Tips, Tricks and Programmng

Resolving Float Problems in Internet Explorer 6

Return to Forum Home Page

Forum

Return to Topic

Return to Topic

Login to Forum

Login to Forum

Register to access Forum

Register to access Forum

Previous Thread Return to Topic Next Thread
Author Message

17 Designs

17 Designs

Date Joined:
Jan 19, 2010

Posts:
66

Posted: Wed Sep 29, 2010 08:36 AM

Subject: Resolving Float Problems in Internet Explorer 6

First, you are going to ask me "Why Internet Explorer 6?"

Well, unfortunately, there are still computers out there that have Internet Explorer 6. Remember those old computers placed in boardrooms that the I.T. person forgot to upgrade. That's an excellent example of a computer that is probably still running IE 6 and if you are the unlucky chap that has to do a web presentation on it unless your web code has been bullet-proofed for IE 6 your presentation will probably fall flat.

That being said here is how you deal with floats that don't align in IE6.

#page-content {
float: left;
width: 783px;
background-color: #ffffff;
border-left: 3px solid #ff9d04;
margin: 0 0 0 0;
padding: 0 0 0 0;
display: inline;
}
#page-details {
float: left;
width: 780px;
background-color: #ffffff;
margin: 0 0 0 20px;
padding: 0 0 0 0;
display: inline;
}
div.left-content {
float: left;
width: 430px;
margin: 0 17px 0 0;
padding: 0 0 0 0;
display: inline;
}

For every div statement we add the css code "display: inline". This will eliminate the problem IE6 has with left and right margins doubling up and causing floats to bounce below.

Don't forget to clear your floats once you are done with them.

div.clearfloats {
clear:both;
}

Add a div statement <div class="clearfloats"></div> to eliminate the floats above.

Return to Forum Home Page

Forum

Return to Topic

Return to Topic

Login to Forum

Login to Forum

Register to access Forum

Register to access Forum