CODEWITHSUNDEEP
htmlcssinternet-explorer-7
mherr
mherr

Reputation: 378

Side by Side Divs while dealing with Internet Explorer compatibility mode

I am designing a website using the MVC-3 framework. While IE compatibility mode is not being used, it appears correctly and looks like this:

a

The code for this I am using is this:

<div id="header">
        <div id="title">                                 /* NUMBER 1 */
            <img src="@Url.Content("~/Content/A_picture.png")" />
        </div>
        <div id="menucontainer">                         /* NUMBER 2 */
            <ul id="menu">
                /* some menu items*/
            </ul>
        </div>
</div>
<div id="main">                                          /* NUMBER 3 */
   @RenderBody()
</div>

One day, I had the need to force my code to believe it was running IE7 for other formatting consistency issues.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

But now, forcing this breaks my initial website layout. While using the forcing of IE7, it looks like this:

b

Thank you for staying with me through the explanation. Now my question - how can I manipulate my div sections that are now broken to appear as they did in my first picture, while still forcing the emulation of IE7?

Any thoughts, ideas, and suggestions are much appreciated.

Edit: CSS

Some pieces of CSS I believe could be helpful to solve this problem are as follows. Sorry, I obviously should have included this initially.

header,
footer,
nav,
section {
    display: block;
}

header, #header {
    position: relative;
    margin-bottom: 0px;
    padding: 0;
}

nav, 
#menucontainer {
    margin-top: 40px;
}

div#title {
    display: block;
    float: left;
    text-align: left;
}

Upvotes: 0

Views: 2780

Answers (3)

mherr
mherr

Reputation: 378

Amazingly enough, the solution is simply to add one line to the #menucontainer css like this:

nav, 
#menucontainer {
    margin-top: 40px;
    display: inline;
}

The line added is "display: inline", and I added it to the number 2 div in my diagram.

Thank you for everyone who weighed in on this topic!

Upvotes: 0

bluebela84
bluebela84

Reputation: 31

instead of using the floats you could also use

     display: inline-block; /*which works for most browsers including newer versions of ie, the following two lines are the fix for older versions of ie.*/
     *display: inline;
     zoom: 1;

Do this on any object/element that needs to 'sit' next to another object/element

Upvotes: 0

Lukas
Lukas

Reputation: 7734

maybe you need to use vertical-align, for ie you sholud set smth like this:

#id_top_elements {
  display: table-cell; 
  vertical-align: bottom;
}

but if you can show your css it may be heplfull ;)

or try smth like this:

<!--[if lt IE 8]>
<style>
   #id_top_elements {
       position: relative; 
       top: -50%
   }
</style>
<![endif]–>

but now you need to add some wrapper for top elements, and it must have position: absolute;

Upvotes: 1

Related Questions