Probleme bei Positionierung durch float

Status
Nicht offen für weitere Antworten.
T

tofa

Mitglied
Hallo zusammen,

ich versuche zwei DIV-Boxen über die float-Eigenschaft nebeneinander zu positionieren - was auch unter Mozilla (Version Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040206 Firefox/0.8) ganz gut funktioniert, jedoch kränkelt der IE6 unter erheblichen Darstellungsproblemen: Die Boxen werden nicht nebeneinander positioniert, sondern untereinander.
Anbei der vollständige Code. Ich bin für jede Hilfe dankbar! :)

Gruß,
Tom



Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional/EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <style type="text/css">
 <!--
body{
margin-top:10px;
padding:0px;
}


#header{
background:gainsboro;
padding:0;
border:0;
width:770px;
height:135px;
margin:0;}


#main{
background-color:#469B35;
padding:0;
border:0;
width:770px;
margin:0;}

#menu{
position:relativ;
width:149px;
margin:0;
padding:0;
float:left;
}


#content{
background-color:#ffffff;
padding:0;
width:621px;
margin-left:149px;
border:0;
}

#footer{
background-color:#000000;
padding:0;
border:0;
width:770px;
height:19px;}

.menuitem{
margin-bottom:5px;
}

-->
</style>
  </head>
  <body>
      <div id="header">Header</div>
     <div id="main">
      <div id="menu">
       <ul>
        <li>Menüpunkt 1</li>
        <li>Menüpunkt 2</li>
        <li>Menüpunkt 3</li>
        <li>Menüpunkt 4</li>
        <li>Menüpunkt 5</li>
        <li>Menüpunkt 6</li>
        <li>Menüpunkt 7</li>
        <li>Menüpunkt 8</li>
        <li>Menüpunkt 9</li>
        <li>Menüpunkt 10</li>
        <li>Menüpunkt 11</li>
       </ul>
      </div>
      <div id="content">
        <p>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
         nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
         volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
         ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo
         consequat.Duis autem veleum iriure dolor in hendrerit
         in vulputate velit esse molestie consequat, vel willum
         lunombro dolore eu feugiat nulla facilisis at vero eros
         et accumsan et iusto odio dignissim qui blandit praesent
         luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
        </p>
      </div>
     </div>
     <div id="footer">Footer</div>
  </body>
</html>
 
Versuch mal, bei #menu "margin:0"herauszunehmen ....die Angabe kann je nach Brauser den Effekt haben, dass das damit formatierte Element die Breite des Elternelements hat.... womit dann logisch wäre, dass der Rest darunter statt links davon erscheint

....ist aber nur eine Vermutung:rolleyes:
 
der IE macht mal wieder zicken,

- änder die width von #content auf 618px;
- füge in #footer "clear: both;" hinzu

das dürfte bei weitem jetzt noch nicht gleich aussehen, aber die nachfolgenden steps/korrekturen würde ich erst machen wollen, sobald man das gesamte layout sieht - worauf es ankommt etc.
aber die änderungen packen den text immerhin neben das menu
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück