• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 496
  • Last Modified:

HTML5/CSS floats display incorrectly with IE7

I'm building a small website for a business. I'm not that well trained in coding. I use the web to troubleshoot often. I have found one error of display only in IE7 that is driving me nutz...lol !!! I'm utilizing HTML5 for rounded corners and shading...

I'm using a "container" div with 3 columns...I float left on the first...float right on the second...and then content for the center...displays just fine in all browsers aside from IE7...the "content" drops halfway down the page? I've used the "clear" function and "display" to no success?

Any ideas for this problem would be greatly appreciated !!!

#container2 {
      overflow: hidden;
      background-color:#fff;
      margin-left:auto;
      margin-right:auto;
      height:auto;
      width:960px;
      clear:all;
}

#leftside {
      float:left;
      margin:10px 10px 10px 10px;
      width:145px;
            border-style:solid;
      border-width:1px;
      border-color:#d7d7ff;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
   -khtml-border-radius: 15px;
    border-radius: 15px;
}

#rightside {
      float:right;
      margin:10px 10px 10px 10px;
      width:145px;
                  border-style:solid;
      border-width:1px;
      border-color:#d7d7ff;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
   -khtml-border-radius: 15px;
    border-radius: 15px;
}

#content {
      overflow:hidden;
      width:620px;
      margin:10px 170px 10px 170px;
      border-style:solid;
      border-width:1px;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
   -khtml-border-radius: 15px;
    border-radius: 15px;
      border-color:#d7d7ff;

}
0
PCWoes
Asked:
PCWoes
  • 3
1 Solution
 
COBOLdinosaurCommented:
IE7 does not calculate dimensions to standard.  It is most likely that the total width of the columns as calculated by IE7 is greater than the width of the container so it drops down to the next available empty area.

Either increase the width of the container until it lines up correctly, or reduce the width of one or more of the contained elements.


Cd&
0
 
COBOLdinosaurCommented:
If that does not solve it I think I will need a link to the page to see what it is doing.

Cd&
0
 
PCWoesAuthor Commented:
Dropped width of content 10px and solved...thank you...cross browser design is interesting for sure !!!
0
 
COBOLdinosaurCommented:
It is much less of a challenge today than it was before there were any real standards. Fortunately the browser manufacturers have finally realized that competing on the basis of standards compliance is a good thing.

Cd&
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now