Solved

Different layout in Internet and Firefox

Posted on 2010-08-22
4
558 Views
Last Modified: 2012-08-14
Hi!

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:

.left1{
   float: left;
   clear: left;
   width: 670px;
   height: auto;
}

.left2{
   float: left;
   clear: left;
   width: 670px;
   height: auto;
   margin-top: 15px;
}

.right{
   float: right;
   clear: right;
   width: 300px;
   height: auto;
}

Open in new window


Layout in FIrefox
Layout in IE
0
Comment
Question by:calypsoworld
4 Comments
 
LVL 83

Accepted Solution

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

Assisted Solution

by:nanharbison
nanharbison earned 167 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.
http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/
0
 
LVL 13

Assisted Solution

by:myderrick
myderrick earned 166 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

MD
0
 

Author Closing Comment

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

Thank you!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
REST endpoint query with a parameter 1 18
Button on Table, name table1 not working 4 22
convert Systemjs to Webpack 3 34
Make footer stick to bottom 6 18
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

831 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