HowDoWeDoThis: Komplizierte CSS Situation

Servus,

ich hab eine etwas komplizierte CSS Situation.

Oben ein div, darunter links und rechts je ein div, die die gleiche Breite (nämlich 100%) einnehmen, wie das übergelagerte. A ist das übergelagerte, B das linke untere und C das rechte.

http://img690.imageshack.us/img690/2944/cssi.png

Das Problem ist, dass der Inhalt von C erst während der Erstellung der Site generiert wird und sich stark ändern kann. Mal ist es weniger von der Höhe als B, mal weit mehr. Ich möchte aber, dass B die gleich Höhe annimmt, wie C. Wenn ich B und C in ein weiteres div packe und B auf height:100%; packe, geht das nicht. Wie stelle ich das an?

2tes Problem: A liegt direkt auf B und C. Das heißt die Border berühren sich. Ich muss die Border nun so einstellen, dass der untere Border von A 8bb451 ist, zumindest dort wo sich C drunter befindet. Wo sich B drunter befindet soll kein Border hin. Sozusagen ist B eine Fortführung von A - deshalb darf dort nicht mit Border getrennt werden - hierzu fällt mir keine Lösung ein.

3tens: Zwischen A und B&C liegt derzeit noch ein großer Absatz, den ich nicht wegbekomme. Ich weiß, dass div ein \n erzeugt, aber wenn ich span nehme, geht es auch nicht. Was kann ich tun, damit die direkt aufeinander liegen?

Vielen Dank ;)

  1. Hi,

    Ich möchte aber, dass B die gleich Höhe annimmt, wie C. Wenn ich B und C in ein weiteres div packe und B auf height:100%; packe, geht das nicht. Wie stelle ich das an?

    Du informierst dich bspw. zum Stichwort Faux Columns.

    2tes Problem:

    Das hab ich nicht verstanden.

    3tens: Zwischen A und B&C liegt derzeit noch ein großer Absatz, den ich nicht wegbekomme. Ich weiß, dass div ein \n erzeugt, aber wenn ich span nehme, geht es auch nicht. Was kann ich tun, damit die direkt aufeinander liegen?

    Dir mit einem Debugwerkzeug wie Firebug anschauen, was den „Absatz“ erzeugt.

    MfG ChrisB

    --
    “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
    1. Du informierst dich bspw. zum Stichwort Faux Columns.

      Erledigt - hab ne Lösung.

      Das hab ich nicht verstanden.

      Macht nichts, hab ich jetzt auch schon gelöst.

      Dir mit einem Debugwerkzeug wie Firebug anschauen, was den „Absatz“ erzeugt.

      Auch geschafft.

      Es drängt sich aber eine 4te Frage auf: A,B und C musste ich in einen weiteren Container packen. Dieser soll immer einen bestimmten Abstand zum oberen Container haben. Das gelingt mir aber nicht, da ja C immer unterschiedliche Höhen animmt. Wenn ich 50px Abstand zum nächten oberen Element eingebe, nimmt er die immer zu C. Aber dann ist es oft der Fall, dass er zu nahe an B ist. Je nachdem wie hoch C ist. Andersrum, wenn ich bei B eintrage: margin-bottom:50px; passiert es oft, dass C so lang wird, dass der sich schon wieder viel zu nahe an den neuen Container ranquetscht. Was kann man da machen? Ich muss irgendwie sagen wir 20px Abstand von BEIDEN (B und C) haben...

      Danke nochmal

      1. Es drängt sich aber eine 4te Frage auf: A,B und C musste ich in einen weiteren Container packen. Dieser soll immer einen bestimmten Abstand zum oberen Container haben. Das gelingt mir aber nicht, da ja C immer unterschiedliche Höhen animmt. Wenn ich 50px Abstand zum nächten oberen Element eingebe, nimmt er die immer zu C. Aber dann ist es oft der Fall, dass er zu nahe an B ist. Je nachdem wie hoch C ist. Andersrum, wenn ich bei B eintrage: margin-bottom:50px; passiert es oft, dass C so lang wird, dass der sich schon wieder viel zu nahe an den neuen Container ranquetscht. Was kann man da machen? Ich muss irgendwie sagen wir 20px Abstand von BEIDEN (B und C) haben...

        Hi,
        dein Problem zu verstehen ist schon recht schwierig... du hast also über dem Container, in dem sich a,b&c befinden, noch einen container ???
        Bitte genauere Beschreibung, oder am besten ein >>brauchbares<< Beispiel hochladen.

        Mehr Informationen = Mehr Hilfe

        Gruß
        Dynamite

  2. Grüße,

    Das Problem ist, dass der Inhalt von C erst während der Erstellung der Site generiert wird und sich stark ändern kann. Mal ist es weniger von der Höhe als B, mal weit mehr. Ich möchte aber, dass B die gleich Höhe annimmt, wie C. Wenn ich B und C in ein weiteres div packe und B auf height:100%; packe, geht das nicht. Wie stelle ich das an?

    "echt" wohl nur über js

    2tes Problem: A liegt direkt auf B und C. Das heißt die Border berühren sich. Ich muss die Border nun so einstellen, dass der untere Border von A 8bb451 ist, zumindest dort wo sich C drunter befindet. Wo sich B drunter befindet soll kein Border hin. Sozusagen ist B eine Fortführung von A - deshalb darf dort nicht mit Border getrennt werden - hierzu fällt mir keine Lösung ein.

    es gitb keine - es gibt nämlich keine "partiellen bporder" - gib da einfahc kein border-bottom hin, und wenn A/C trennung nötig ist, giob den border dem c

    3tens: Zwischen A und B&C liegt derzeit noch ein großer Absatz, den ich nicht wegbekomme. Ich weiß, dass div ein \n erzeugt, aber wenn ich span nehme, geht es auch nicht. Was kann ich tun, damit die direkt aufeinander liegen?

    sollten die - wie sind margin werte?
    zeig mal online beispiel
    MFG
    bleicher

    --
    __________________________-

    FirefoxMyth