CSS Problem mit div und border

[Dawen]

Hallo !

Ich habe ein kleines Problem.

<div style="width:900px; overflow:hidden">
      <div style="width:599px; border-right:1px solid black;float:left">
       Text
      </div>
      <div style="width:300px; float:left">
      Text
      <br>
      Text
      </div>
</div>

Ich möchte zwischen den beiden div's einen Rahmen einfügen.Nun ist der rechte div höher als der linke. Somit geht der Rahmen nicht komplett "nach unten".

Wie schaffe ich es, dass der Rahmen im linken div immer komplett nach unten geht ?

Ich hoffe es ist klar geworden

 

[benediktibk]

Ich habe kaum Ahnung von CSS, aber könnte man beim zweiten div nicht border-left verwenden und den Rand vom ersten div weg lassen?

mfg benediktibk

 

[mido]

Hallo Dawen,

(edit) am besten du überspringst dieses Posting, denn im nächsten schildert beavisbee eine simple und geniale Lösung. Wenn du allerdings mal wieder in eine ähnliche Situation kommst bei welcher es nicht um den Rahmen sondern z. B. um den Hintergrund geht, hilft dir dieses Posting vll weiter.

Wenn ich dein Problem richtig verstehe, geht es dir darum, zwei DIV's nebeneinander in selber, variabler Höhe darzustellen.

Leider gibt es hierfür keine perfekte Lösung, da Formatierungen von Block-Elementen sich in erster Linie auf den zur Verfügung stehenden Platz begrenzen. Soll heißen: Das Eltern-Element gibt den "vertikalen Rahmen" vor und keine Nachbar-Elemente.

Lediglich die Spalten von Tabellen orientieren sich aneinander. Aber Tabellen-Layouts sind natürlich böse... :wink: Wenn es dich nicht stört (was ich nicht glaube), dass manche IE-Versionen (ob der 7er mitspielt, weiß ich nicht, der 6er und älter sicher nicht) Probleme damit haben, kannst du auch mit "display: table-cell" arbeiten. Wobei die Semantik sich wohl dadurch schon verletzt fühlt, weshalb dann auch gleich Tabellen verwendet werden könnten...

Angenommen du weißt sicher, dass nur eines der beiden DIVs höher wird, wie das andere, dann hilft dir sicherlich benediktibk's Ansatz (dem DIV die border-Eigenschaft geben, welches höher werden kann wie das andere).

Ansonsten solltest du prüfen, ob es nicht doch möglich ist, mit festen Höhenangaben zu arbeiten (es können auch %-Angaben sein).

Wenn es wirklich möglich sein soll, dass beide Spalten mal Höher sein können, hilft dir die "faux columns"-Technik, bei welcher im Endeffekt die selbe Höhe durch eine Hintergrundgrafik vorgegaukelt wird (in deinem Fall wohl etwas zuviel des Guten).

Gruß
mido

 

[beavisbee]

wenn die Trennlinie immer so lang wie die längere Seite sein soll, dann versuch es mal damit:

<div style="width:900px; overflow:hidden;">
      <div style="width:599px; border-right:1px solid black;float:left;">
       Text
      </div>
      <div style="width:300px; border-left:1px solid black; float:left; margin-left:-1px;">
      Text
      <br>
      Text
      </div>
</div>