Css Problem

  • Halli, Hallo liebes Forum.
    Ich schreibe derzeit ein Template und hatte bisher viele Fehler die ich aber erfolgreich beheben konnte.
    Nur jetzt stehe ich vor ein Problem was ich einfach nicht gelöst bekomme.



    [Blockierte Grafik: http://i.epvpimg.com/Qs4Vg.png]



    Unzwar soll der linke Container sich immer den rechten anpassen von der höhe. Denn wenn der linke Container größer ist, sieht man ja was raus kommt. Und da im linke Container der Main Content rein kommt, muss ich da eine Lösung finde da der immer am größten sein wird.


    HTML Quelltext:

    PHP
    <div id="main"><div id="platzhalter"></div><div id="content_head">      STARTSEITE    </div><div id="platzhalter"></div>   <div id="content"><div id="content_wrapper_left"><span style="color: darkred; font-weight: bold;">Links</span><br /><br /> </div><div id="content_wrapper_right"><span style="color: darkred; font-weight: bold;">Rechts</span></div><div id="platzhalter"></div></div></div>



    CSS-Quelltext:

    CSS
    #main {  margin-left: auto;  margin-right: auto;  text-align: left;  margin-top: 12px;  border: 2px solid #000000;  width: 1085px;  margin-top: 95px;}
    #content {  text-align: left;}
    #content_wrapper_left {  width: 65%;  background: #dadada;  padding: 8px;  float: left;}
    #content_wrapper_right {  background: #dadada;  padding: 8px;}
    #platzhalter {  height: 3px;  background: #454545;}



    Ich würde mich freuen wenn mir jemand helfen kann :)

  • Hallo ja das ist echt ein problem.
    also wie du die divs beide immer gleich groß machen kannst weiß ich leider nicht.
    wie du es schaffst das der #content immer die größe hat die er braucht das ist möglich.
    entweder du floatest die kleinere spalte also #content_wrapper_right und entfernst das float bei #content_wrapper_left
    oder du fügst bei #content noch ein overflow:hidden hinzu


    Eine andere möglichkeit wäre du arbeitest nicht mit float sondern mit display:inline-block,dann werden die beiden divs auch nebeneinander dargestellt.


    wie man es aber flexibel hinbekommen kann das beide divs gleich groß sind das schaffe ich nur mit tabellen xD (aber tabellen sind zum disignen der website verpönt)

  • Das Stichwort dazu ist faux Columns. Du packst um beide einen Wrapper und gibst diesem ein Hintergrundbild, welches beide Boxen überspannt und nach unten wiederholt wird.
    Eine bessere Lösung gibt es bis jetzt meines Wissens noch nicht. Theoretisch kann man das ganze noch dynamisieren indem man das Bild dynamisch generieren lässt.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!