Question

So I have a tab menu,

SO i.e.

And once clicking on the tabs the content for that tab display with a white background matching the tab. The problem in IE7 is that the content for the tab does get displayed but the content goes outside my tab div and into the background. This only happens in IE7.

The content mark up is as follows

<div class="tabContentRow">
    <div class="tabContentImageLeft" style="DISPLAY: inline">
      <a href="" target="_blank">
        <img width="110" height="110" alt="Video" src="~/?w=110&amp;h=110&amp;as=1" /> </a>
    </div>
    <div class="tabContentCopyRight" style="DISPLAY: inline">
      <h2>video</h2>
      <p>Text here.</p>
    </div>
</div>

And the problem has to do with my two divs

<div class="tabContentImageLeft" style="DISPLAY: inline">
<div class="tabContentCopyRight" style="DISPLAY: inline">

If I dont put the content within these two divs then even IE7 it stays nicely within my tab div. But if I put it the tab div doesnt drop down and it just blends into the background.

.tabContentImageLeft {float: left; width: 130px; text-align: center;}
.tabContentCopyRight {float: left; width: 575px;}

Answer 1

Add a clear div at the bottom of your tabContentRow. Your elements are floating and therefor taken out of the DOM flow.

    <div class="tabContentRow">

           .....Inner tab markup


       <div class="clear-fix" style="clear:both;display:block;"></div>
   </div>