Pascal: Dreispaltiges Layout

hallo alle zusammen,

mach mir gerade eine neue Homepage, unteranderem mit css. Hatte vor ein dreispaltiges Layout zu machen, mit drei div's. Der Firefox zeigt des auch wunderbar an, allerdings der Internet Explorer nicht. Stell euch jetzt mal den Quelltext hier rein (der ist nur für euch so, normal ist css ausgelagert usw. ;-) ). Vielleicht könnt ihr mir sagen, warum der Internet Explorer des mittlere div nicht auch nach oben schiebt, sondern unter den zwei anderen lässt.

Vielen Dank im voraus.

Pascal

<body style="background-color:#CCCCCC; text-align:center">

<div style="margin:auto; width:800px; height: 820px; border:1px solid green">

<div style="float:right"><img src="rand_rechts.gif" alt="" width="30" height="820"></div>
  <div style="float:left"><img src="rand_links.gif" alt="" width="30" height="820"></div>
  <div style="margin-left:30px;">
   <div><img src="rand_oben.gif"alt=""></div>
   <div style="height:760px; width:740px; background-color:#FFFFFF; border:1px solid red;"></div>
   <div><img src="rand_unten.gif" alt=""></div>
  </div>

</div>

</body>

  1. Hallo Pascal,

    <div style="float:right"><img src="rand_rechts.gif" alt="" width="30" height="820"></div>
      <div style="float:left"><img src="rand_links.gif" alt="" width="30" height="820"></div>

    es fehlt unter anderem die Angabe zur Breite der gefloateten Elemente. Wenn du diese angibst, nimmt das Inhalt-Div als letztes notiert den verbleibenden Platz zwischen Link- und Rechts-Div ein.

    <div style="width:15em; float left;">Navigation</div>
    <div style="width:15em; float right;">News</div>
    <div>Inhalt</div>

    siehe auch: http://de.selfhtml.org/css/layouts/mehrspaltige.htm

    Mit freundlichen Grüßen,
    André

    --
    Leistung ist nur durch Wahnsinn zu ersetzen.
    1. ne sry, bringt nix da die Breite anzugeben...

      hier könnt ihr es euch mal anschauen:

      http://obsthaendler.ob.funpic.de/Homepage/obsthaendler/o_home.htm

      aber nicht auf firefox^^ :)
      da funktionierts ja ;)

      keine ahnung warum des nicht nach oben geht..

      hoffentlich könnt ihr euch jetzt besser vorstellen was ich meine ;)

      mfg
      pascal

      1. Hi,

        aber nicht auf firefox^^ :)
        da funktionierts ja ;)

        nein - da funktioniert's eben auch nicht. Oder siehst Du den rechten border?
        Du hast Dich wie gesagt um 2px verrechnet.

        freundliche Grüße
        Ingo

        1. ok stimmt! hab ich die border vergessen ;)

          allerdings hilft des mit beim ie ned weiter, weil des mittlere div immernoch unten bleibt :(

          weißt du noch was?

          mfg

          pascal

          PS: vielen dank schon mal für die vorausgegangene hilfe!

          1. hi,

            allerdings hilft des mit beim ie ned weiter, weil des mittlere div immernoch unten bleibt :(

            Da du den IE mit dem unvollständigen Doctype in den Quirks Mode schickst, berechnet er das Box Model vermutlich immer noch falsch, so dass das Element nach wie vor zu breit ist, um zwischen den beiden anderen angezeigt zu werden - und deshalb nach unten verschoben werden muss.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            1. und was soll ich dann ändern? :)

              mfg
              pascal

              PS: bin bis donnerstag ned da, also nicht wundern wenn ich nich antworte... dann aber schon ;)

  2. Hi,

    <body style="background-color:#CCCCCC; text-align:center">

    ich hoffe, dass im Originalcode noch was drüber steht...

    <div style="margin-left:30px;">

    und wo ist der Abstand nach rechts?

    <div style="height:760px; width:740px; background-color:#FFFFFF; border:1px solid red;"></div>

    Das div ist also 742px breit und soll sich die 800px Breite mit zwei Elementen mit je 30px Breite teilen?

    freundliche Grüße
    Ingo