Pomplito: Positionierung

Hallo,

ich habe folgendes Problem.
Ich möchte einen <div>-Kontainer, anlegen, der links bei 200px beginnt und exakt bis an den rechten Fensterrand reicht und darin wieder Container mit Inhalten platzieren.

<div style="position:absolute;left:200px;top:0%;height=100%;width:100%;">
  <div style="position:absolute;left:0%;top:0%;width:25%;height:100%;"><img src="bilder/1.gif" width="100%" height="100%">
  </div>
  <div style="position:absolute;left:25%;top:0%;width:75%;height:100%;"><img src="bilder/2.gif" width="100%" height="100%">
  </div>
</div>

Damit überragt der 1.Kontainer aber (logischerweise) die Browsergrenzen, da 100%+200px ja mehr als 100% ist.
Wenn ich die Width-Angabe jedoch weglasse oder durch "auto" ersetze, oder mit minwidth, etc. rumexperimentiere wird die äüßere Div-Box nie angezeigt, weder bei IE, noch Firefox.
Was mache ich da falsch?

Schönen Gruß
Pomplito

  1. hi,

    Ich möchte einen <div>-Kontainer, anlegen, der links bei 200px beginnt und exakt bis an den rechten Fensterrand reicht und darin wieder Container mit Inhalten platzieren.

    <div style="position:absolute;left:200px;top:0%;height=100%;width:100%;">

    du solltest hier keine absolute positionierung nutzen, sondern das element ganz einfach im elementfluss belassen - margin-left:200px reicht doch schon aus, um einen div mit den gewünschten "maßen" zu erzeugen.

    und damit sich die kindelemente in ihrer absoluten positionierung an diesem container ausrichten können, verpasse ihm position:relative - _ohne_ irgendwelche angaben zu top, left & co.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Danke,
      der äußere Kontainer klappt damit auch wunderbar, nur die inneren leider nicht mehr, weil diese sich bei relativer Position nicht mehr so anordnen lassen.

      1. was meinst du mit "nicht mehr so anordnen lassen"? Auch bei position:relative kann man Angaben zur Position machen.

        Michael

  2. Hi,

    Ich möchte einen <div>-Kontainer, anlegen, der links bei 200px beginnt und exakt bis an den rechten Fensterrand reicht und darin wieder Container mit Inhalten platzieren.

    Dann mach das doch. right existiert.

    <div style="position:absolute;left:200px;top:0%;height=100%;width:100%;">

    Machst Du absichtlich KEINE Angabe zu height?

    <div style="position:absolute;left:0%;top:0%;width:25%;height:100%;"><img src="bilder/1.gif" width="100%" height="100%">
      </div>
      <div style="position:absolute;left:25%;top:0%;width:75%;height:100%;"><img src="bilder/2.gif" width="100%" height="100%">
      </div>

    Wozu die divs? Warum positionierst Du nicht die Bilder?

    Damit überragt der 1.Kontainer aber (logischerweise) die Browsergrenzen, da 100%+200px ja mehr als 100% ist.
    Wenn ich die Width-Angabe jedoch weglasse oder durch "auto" ersetze, oder mit minwidth, etc. rumexperimentiere wird die äüßere Div-Box nie angezeigt, weder bei IE, noch Firefox.

    Da das äußere div auf height:auto steht und keinerlei die Höhe beeinflussenden Inhalt hat (die inneren div sind ja per position:absolute rausgenommen), ist die Höhe ziemlich genau bei 0.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hi,

      da steht doch immer height:100%,
      das scheint nur nicht zu funktionieren, wenn kein Inhalt drin steht, liege ich da richtig? Wie kann man es denn sonst angeben? Also ein <div> mit immer 100% Höhe relativ zum Elterndingens?

      1. Hallo Pomplito,

        da steht doch immer height:100%,

        nein, da steht height=100% - und da das kein gültiges CSS ist, muss es ignoriert werden.

        Grüße aus Nürnberg
        Tobias