css - issue with floated divs in IE7 and IE6 -


i have floated 2 elements right in header of website <div id="twitter"> , <div id ="navbar>, there appearance becomes skewed when view them in ie6 , ie7. believe either need clear floated elements or apply clearfix unsure where.

here image of issue in ie6 , ie7:

enter image description here

this desired result appear in modern browsers.

enter image description here

here link web page: http://www.bestcastleintown.co.uk/pg/

css:

#twitter {     background: red;     float: right;     height: 40px;     margin-bottom: 40px;     width: 200px; }  #navbar {     font-size: 2.2em;     float:right; } 

html:

<div id="main_header">     <div id="inner_main_header">         <div>             <div id="main_logo">                 <div class="home_page_logo left">                     <a href="index.php"><img src="pg_awards_logo.gif"></a>                 </div>             </div>             <div>                 <div id ="twitter" class="padall">                     follow                 </div>                 <div id ="navbar" class="right">                     <ul class="nav ng">                         <li>home</li>                         <li>enter</li>                         <li>categories</li>                         <li>judging</li>                         <li>sponsorship</li>                         <li>contact</li>                     </ul>                    </div>             </div>         </div>     </div> </div> 

change #navbar style this:

#navbar{     font-size: 2.2em;     float: right;     width: 60%;     overflow: auto; } 

just give #navbar width , overflow other visible.


Comments

Popular posts from this blog

node.js - Bad Request - node js ajax post -

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -