Question

i have question… iam writing simple html page with little bit of css. EVERYTHING looks fine in IE, but if I launch it with chrome – menu and My ContentPanel (iframe) are not abreast.

What shall i do? i can use only HTML and CSS, something

small snippet of my css code:
1. button menu- 2O%

ul#buttonmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
float: left;
}

iframe – as my second element on html page has width 80%.

iframe{
height:100%;
width:80%;
float: right;}

in IE it looks fine but in chrome not …. is there any gerenal rule how to fix it?

part of my html looks like:

 <div id="container" style="width:100%">

  <div id="header" style="background-color:#CDB4C8;",widht=100%>
<h1 style="margin-bottom:0;">Name</h1></div>



  <ul id="buttonmenu">
  <li class="current"><a href="first.html" target = "content">first page</a></li>
  <li><a href="second.html" target="content">Second page</a></li>
  <li><a href="third.html"  target="content">Third page</a></li>
  <li><a href="fourth.html" target="content">Fourth page</a></li>
  <li><a href="contact.html" target="content">Contact</a></li>
  </ul>


 <iFrame id="content" name="content" style="background-color:#EEEEEE;float:left;">
  </div> 

Fiddle of this code

Answer 1

If you shrink your width of your iframe width to 79% it’s abreast.

iframe{
    height:100%;
    width:79%;
    float: right;
}

Alternatively you can just remove the border of the iframe and keep with width of 80%:

iframe {
    height:100%;
    width:80%;
    border: 0;
    float: right;
}

Example jsfiddle with width: 79% or Example jsfiddle with border: 0

Also on a side note I think you messed up on your code here:

<div id="header" style="background-color:#CDB4C8;",widht=100%>

I think you wanted to put:

<div id="header" style="background-color:#CDB4C8; width: 100%;">