• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Umbruch des DIV´s im IE

B

bendigo

Neues Mitglied
Hallo

Ich schaffe es einfach nicht die Darstellung im IE richtig hin zu bekommen.

eigentlich sollte das mitte div auf den anderen beiden liegen --> jetzt bricht es aber immer im im IE (Safari, Firefox, ... gehen alle)

an was könnte es liegen?

gruss
pascal

mein Codeauszug:

HTML: 
<html lang="de">
<head>
 
<style type="text/css"> 
 
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow:  hidden; 
    
    }
    #left{
      background-color: #993399;
      float: left;
      width: 50%;
      text-align: left;
      height: 30px;
    }
    #right{
      background-color: #00ff99;
      float: right;
      width: 50%;
      text-align: right;
      height: 30px;
    }
    #center{
      background-color: #cc6633;
      float: left;
      width: 1020px;
      margin-left: -510px;
      margin-right: -510px;
      text-align: center;
      height: 30px;
    }
</style>
</head>
 
<body>
<div style="width: 100%; float: none;"> 
    <div id="left"><p>Links</p></div>
    <div id="right"><p>Rechts</p></div>
    <div id="center"><p>Mitte</p></div>
</div>
<!-- Ende der Nav --> 
</body>
</html>
 
Wenn links und rechts jeweils 50 % breit sind, dann ist doch damit die Seite bereits gefüllt, nämlich mit 100%.
Somit musst du diesen beiden eine weitaus geringere Breite zuweisen.
Wenn der Mittelteil aber eine konstante Breite haben soll, dann wird auch das problematisch, denn Prozent und Pixel lassen sich bedingt durch unterschiedliche fenstergrößen nicht auf einen Nenner bringen.

Ich würde es so lösen:
Gib allen drei Teilen entweder jeweils eine bestimmte Pixelbreite oder wähle die Prozentwerte so, dass sie zusammen maximal 100% ergeben.
(da darf dann aber kein margin, padding oder border mehr hinzukommen.
Beim mittleren Teil kannst du bei deiner Kontruktion dann float und margin weglassen. Der schiebt sich generell dazwischen, so er genügend Platz hat.

Edit:
Unabhängig davon, wäre eine solche Zentrierung besser:
Code: 
 #center{
      background-color: #cc6633;
      width: 1020px;
      margin: 0 auto;
      text-align: center;
      height: 30px;
    }
 
Zuletzt bearbeitet:
Hallo

hier mal mein Skin den ich umsetzen will --> wenn ich nur ein div für das center her nehme bekomme ich immer einen weißen balken.

01_Start_oegrm..jpg

hier nochmals meinen vollständigen Code:
Code: 
<html lang="de">
<head>
 
<style type="text/css"> 
 
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow:  hidden; 
    
    }
 
#hintergrund {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1; 
    }
 
#content {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: auto; 
 float: none;
    }
 
.OutsideContainer{
 width: 100%;
}
.logo{
 width: 920px;
 border:1px outset gray;
 margin:.5em;
 padding:.5em;
 background-color:#efd;
}
.main{
 width: 920px;
 height: 400px;
 margin:.5em;
 padding:.5em;
 background-color:#efd;
}

    #center{
   width: 100%; 
   float: none;
      background-color: #cc6633;
      margin: 0 auto;
      text-align: center;
      height: 30px;
    }
</style>
</head>
 
<body>
<div id="center"> 
 <p>menü</p>
</div>
<!-- Ende der Nav --> 
<img alt="Hintergrundbild" id="hintergrund" src="bg1.jpg" border="0" />
<div id="content">
    <div id="OutsideContainerLogo" class="OutsideContainer" align="center">
        <div id="logo" class="logo" align="center">logo</div>
    </div>
    <!-- Ende des Logos --> 
    <div id="OutsideContainerMain" class="OutsideContainer" align="center">
        <div id="main" class="main" align="center">
         hier kommt der content 
        </div>
    </div>
    <!-- Ende des MainContents --> 
</div>
<!--Ende #content-->
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben