Formatting Wrong on IE 11 and Edge
<p>I am working on a website that someone else started from a template so not everything in it is mine. I am not a web designer by trade, but I do have coding experience. Everything displays perfectly in Firefox and chrome, and near perfectly in Edge, but quite wrong in IE11.</p>

<p>Examples: <a href="https://imgur.com/a/r4cI0" rel="nofollow noreferrer">https://imgur.com/a/r4cI0</a></p>

<p>Firefox:</p>

<p><a href="https://i.imgur.com/jPcA3OQ.png" rel="nofollow noreferrer"><img src="https://i.imgur.com/jPcA3OQ.png" /></a></p>

<p>Edge:</p>

<p><a href="https://i.imgur.com/TTY8aEh.png" rel="nofollow noreferrer"><img src="https://i.imgur.com/TTY8aEh.png" /></a></p>

<p>Internet Explorer 11:</p>

<p><a href="https://i.imgur.com/aQdg1b6.png" rel="nofollow noreferrer"><img src="https://i.imgur.com/aQdg1b6.png" /></a></p>

<p>I cant seem to figure out why the background color isn't displaying of certain aspects when viewed with internet explorer. I also can't seem to figure out why the text isn't floating right so it sits next to the picture. The header and footer also display incorrectly when viewed in IE 11.</p>

<p>Here is the HTML involving the text that is supposed to be next to the picture:</p>

<pre><code>&lt;aside&gt; 
&lt;h3&gt; Fliteway Technologies&lt;/h3&gt;
&lt;p&gt;Your Single Source for Soil and Groundwater Remediation Equipment&lt;/p&gt;
&lt;h3&gt;&lt;a href="Fliteway Tour.pdf"&gt;Take a Tour!&lt;/a&gt;&lt;/h3&gt;
&lt;/aside&gt;
</code></pre>

<p>and here is the CSS:</p>

<pre><code>aside {
float: right;
width: 225px;
height: auto;
background-color: #E3E3E3 !important;
background-color: rgba(227, 227, 227, 1);
background:#E3E3E3;
margin-top: 0;
clear: left;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
overflow: hidden;
margin-left: auto;
margin-right: 0;
margin-bottom: auto;
display: block;
visibility: inherit;
</code></pre>

<p>There is a bit of clutter in the CSS as I have been trying anything I come across online to try to fix the problem. Any suggestions would be greatly appreciated as I am really stuck on this.</p>

<p>picture HTML:</p>

<pre><code>&lt;sidepicture&gt;
&lt;div class="sidepicture"&gt;&lt;img src="_images/Bld with Addition.jpg" alt="Shop" width="564" height="270"&gt;&lt;/div&gt;
&lt;/sidepicture&gt;
</code></pre>

<p>picture CSS:</p>

<pre><code>.sidepicture {
display:inherit;
}
</code></pre>