CODEWITHSUNDEEP
htmlcss
DRastislav
DRastislav

Reputation: 1882

html and css positioning of html pages "elements"

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

Upvotes: 0

Views: 222

Answers (2)

Sean Keating
Sean Keating

Reputation: 1728

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%;">

Upvotes: 1

Andres
Andres

Reputation: 2023

take out the border in the iframe and i did a float clear after it so the the container height is kept in case u forget :)

<html>
<head>
<title></title>
<style type="text/css">
body{margin:0; padding:0;}

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

#content{
height:100%;
width:80%;
float: right !important;
border:none;}
</style>
</head>
<body>
<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 style="clear:both;"></div>
</div> 

</body>
</html>

Upvotes: 0

Related Questions