Different layout in Internet and Firefox

Posted on 2010-08-22
Medium Priority
Last Modified: 2012-08-14

I have a website and the layout is not the same in IE and Firefox.
The result in Firefox is what I want, but in IE it's totally different.

There are 4 DIVs and this is the CSS:

   float: left;
   clear: left;
   width: 670px;
   height: auto;

   float: left;
   clear: left;
   width: 670px;
   height: auto;
   margin-top: 15px;

   float: right;
   clear: right;
   width: 300px;
   height: auto;

Open in new window

Layout in FIrefox
Layout in IE
Question by:calypsoworld
LVL 84

Accepted Solution

Dave Baldwin earned 668 total points
ID: 33496085
Make the left divs 660px and see if it works.  You could also give the body a margin of 0.
LVL 17

Assisted Solution

nanharbison earned 668 total points
ID: 33497433
You need to read this article because this is ALWAYS going to be a problem with IE.I create conditional style sheets for IE after I have the pages looking perfect in FF.
LVL 13

Assisted Solution

myderrick earned 664 total points
ID: 33506904
Let me ask. What is the total width of the main container that has these three divs?

One of the reasons IE will behave like above is when the widths of the div is a little wider than the container width. You can try reducing the right divs width or use the simple IE specific width element "_width".

This will be read by only IE.

Please do post back


Author Closing Comment

ID: 33543623
The inside divs was a little bigger than the container.

Thank you!

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

586 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question