Note that there are some explanatory texts on larger screens.

plurals
  1. POSide by Side Divs while dealing with Internet Explorer compatibility mode
    primarykey
    data
    text
    <p>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:</p> <p><img src="https://i.imgur.com/LbegJ.png" alt="a"></p> <p>The code for this I am using is this:</p> <pre><code>&lt;div id="header"&gt; &lt;div id="title"&gt; /* NUMBER 1 */ &lt;img src="@Url.Content("~/Content/A_picture.png")" /&gt; &lt;/div&gt; &lt;div id="menucontainer"&gt; /* NUMBER 2 */ &lt;ul id="menu"&gt; /* some menu items*/ &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="main"&gt; /* NUMBER 3 */ @RenderBody() &lt;/div&gt; </code></pre> <p>One day, I had the need to force my code to believe it was running IE7 for other formatting consistency issues.</p> <pre><code>&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /&gt; </code></pre> <p>But now, forcing this breaks my initial website layout. While using the forcing of IE7, it looks like this:</p> <p><img src="https://i.imgur.com/P4ijw.png" alt="b"></p> <p>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?</p> <p>Any thoughts, ideas, and suggestions are much appreciated.</p> <p>Edit: CSS</p> <p>Some pieces of CSS I believe could be helpful to solve this problem are as follows. Sorry, I obviously should have included this initially.</p> <pre><code>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; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload