Hagen: 3spaltiges layout

Hallo,
habe folgendes css für ein 3 spaltiges layout:
#body{
 margin:0;
 padding:0;
 }
#left{
 margin-left:8%;
 width:28%;
 height:200px;
 float:left;
 background-color:#0E2972;
}
#center{
 width:28%;
 height:200px;
 float:left;
 background-color:#FEE765;
}
#right{
 margin-right:8%;
 width:28%;
 height:200px;
 float:right;
 background-color:#99CC66;
}

die 3 boxen sollen mittig genau aneinander "kleben", später kommt noch ein 1% rand zwischen den boxen hinzu.Nur leider klappt das mit dem kleben nicht so ganz:-). Dachte mir ich habe 100% 3*28 für die boxen bleiben noch jeweils 8% für das margin links und rechts, anscheinend rechnet der ie anders, weiß jemand wie? In FF und OP gehts.

MFG Hagen

  1. Hallo,
    dein Problem ist das du falsch floatest.
    Gib dem #right mal ein float:left anstatt float:right.
    Dann müsste es funktionieren.

    Schönen Gruss

    1. Hey danke für deine Antwort

      dein Problem ist das du falsch floatest.
      Gib dem #right mal ein float:left anstatt float:right.
      Dann müsste es funktionieren.

      nö jetzt ist die anordnung in keinem browser mehr richtig.

      MFG Hagen

      1. Hey danke für deine Antwort

        dein Problem ist das du falsch floatest.
        Gib dem #right mal ein float:left anstatt float:right.
        Dann müsste es funktionieren.

        nö jetzt ist die anordnung in keinem browser mehr richtig.

        MFG Hagen

        Seltsam, ich habe es in ie7, ff2.02 und opera9 getestet. Klappt bei mir wunderbar.
        Hier mal der komplette Quelltext mit dem ich getestet habe:

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
        <html>
        <head>
        <title></title>
         <style type="text/css">
         <!--
         #body{
         margin:0;
         padding:0;
         }
        #left{
         margin-left:8%;
         width:28%;
         height:200px;
         float:left;
         background-color:#0E2972;
        }
        #center{
         width:28%;
         height:200px;
         float:left;
         background-color:#FEE765;
        }
        #right{
         margin-right:8%;
         width:28%;
         height:200px;
         float:left;
         background-color:#99CC66;
        }
         -->
         </style>
        </head>
        <body>
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
        </body>
        </html>

        Gruss

        1. schaus dir mal im ie6 an:-).

          MFG

          1. schaus dir mal im ie6 an:-).

            MFG

            Tut mir leid, habe nur den 7er. Eine Parallelinstalation ist mir zu riskant :-(

            Gruss

            1. ok trotzdem vielen dank, und du hättest keine idee woran es liegen könnte?

              MFG Hagen

              1. ok trotzdem vielen dank, und du hättest keine idee woran es liegen könnte?

                MFG Hagen

                Der IE6 hat so viele Bugs, deren Hacks ich auch nicht alle kenne.
                Hier muss eine neue Lösung her.
                Stichwort wäre hier Listenelemente, also:
                <ul>
                <li></li>
                <ul>

                Das kommt dem was du vor hast von der Optik her gleich, und der 6er müsste das eigentlich schlucken. Einfach mal probieren.

                Gruss

  2. Hi Hagen!

    Vielleicht hilft dir http://www.positioniseverything.net/explorer/doubled-margin.html.

    MfG H☼psel

    --
    "It's amazing I won. I was running against peace, prosperity, and incumbency."
    George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
    Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)