Jörg: Problem mit zwei Div's und float:left

SELF-Forum

Problem mit zwei Div's und float:left

Jörg
– Informationen zu den Bewertungsregeln

Hallo,
ich habe mir ein zweispaltiges Layout nachgebaut, in etwa so wie es auch in selfHTML beschrieben ist.
Das klappt soweit auch wunderbar, allerings habe ich ein Problem mit einer Spalte:

Also die Grundseite ist schlicht in zwei div's aufgebaut:

<div style='float:left'>
Inhalt links
</div>
<div>
Inhalt rechts
</div>

Nun ist auf der rechten Seite eine Zeile in der Text sowohl links als auch rechtsbündig angezeigt werden soll.
Also so:
<div style='float:left; margin-left:155px;'>linksbündig</div> <div>rechtsbündig</div>

Das margin-left entspricht der Größe der linken Spalte.
Das funktioniert auch wunderbar, solange die linke Spalte keinen Inhalt mehr aufweißt.
Sobald links noch irgendetwas steht verschiebt sich das Ganze nach rechts, weil er es nicht mehr am linken Rand ausrichtet sondern am letzten Element des linken div's.

Zu sehen ist das Ganze hier:
http://www.digitales-lichtbild.de/css-versuch/
(siehe bei Name "christoph", der einmal richtig eingerückt und einmal zu weit rechts ist).

Es muss aufjedenfall was mit dem zweiten float:left zu tun haben - lasse ich das raus wird alles richtig eingerückt, allerdings dann halt nicht mehr in einer Zeile ...

P.S.:
CSS-Datei unter:
http://www.digitales-lichtbild.de/css-versuch/css/haupt.css

Kann mir da jmd weiterhelfen?

MfG,
Jörg

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Problem mit zwei Div's und float:left

    jörg
    – Informationen zu den Bewertungsregeln

    hm, kann mir da niemand weiterhelfen?

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Problem mit zwei Div's und float:left

      Mel
      – Informationen zu den Bewertungsregeln

      Hallo Jörg,

      ich musste mir Dein Posting bzw. Problem mehrmals durchlesen um zu verstehen können was Dein Problem ist - ich hoffe ich habe es nun auch richtig verstanden.

      Also:

      ich muss mal Deinen CSS-Code hier zerpflücken:

      /* sidebar */

      div#sidebar {
               float:left;
               width:139px;
        }

      /* main und navibar */

      div#main {
               margin:0px;
               padding:0px;
      }

      div#navibar {margin-left:142px;}

      /* Eintrag-main */

      h1.titel {margin-left:170px;}

      p.blog {margin-left:155px;}

      div.autor {padding-left:155px;}

      --> also: Du gibst den meisten Elementen in deinem div#main entweder linke margin- oder padding-Werte. Gibt es dafür einen besonderen Grund?

      Warum gibts Du nicht dem div#main ein margin-left?

      also sowas:
        div#main {margin: 0 0 0 150px;}

      -->> hier müsstest Du diese Werte dann wieder entsprechend korrigieren, (also auf 0 setzen).

      h1.titel {margin-left:170px;}

      p.blog {margin-left:155px;}

      div.autor {padding-left:155px;}

      Grundsätzlich könnte Dein CSS mal besser organisiert, strukturiert und aufgeräumt werden ;) DAs ist nicht böse gemeint, fällt mir nur auf.

      vg melanie

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln