Div Erweiterung nicht proportional zum Inhalt

Question

Ich bin eine Reihe von Tabellen in divs Umwandlung, das Layout selbst ist sehr einfach und so weit es funktioniert großartig sowohl in dem heißt und ffx. ABER, wenn der Inhalt eines div nicht, dann paßt es aus er wächst, und schiebt alles, nachdem es nach unten ... in anderen Werken, macht ein Chaos Das Layout ist wie diese,

<div class="wrapper">
    <div class="left">picture</div>
    <div class="right">
        <div class="title"> title</div>
        <div class="content">body</div>
    </div>
 </div>

Rechts schwebt Rechte, Titel geht auf in der rechten und der Inhalt ist darunter, links schwimmt links und erstreckt sich über die Höhe des rechten (ursprünglich, dass ein rowspan = 2 war). das Problem kommt mit Wrapper, der eine feste Höhe haben muss, weil seine Eltern hat keine (so kann ich verwenden% nicht), und da der Inhalt dynamisch ist, weiß ich nicht im Voraus, was Höhe ich brauche. Wenn ich von der Höhe loszuwerden, die div erweitert, aber das Styling des div (bg Farbe, Rahmen usw.) verschwindet, weil es jetzt Höhe hat 0.

Auch ich bin auf einem bereits vorhandenen Code arbeiten, die im Idealfall möchte ich nicht zu viel mit Javascript Hacks Krempel, aber wenn ich keine andere Wahl haben, dann werde ich. Also, was kann ich tun?

div.wrapper{ height: 150px ; width: 100% ; } 

div.left{ height: 100% ; float: left ; width: 25% ; text-align: center ; } 

div.right{ float: right ; height: 100% ; } 

div.title{ width: 100% ; height: 50px ; } 

div.content{ width: 100% ; height: 100px ; text-align: center ; }

Answer 1

Zum einen nicht verwenden <div class="title">, Verwendung <h1>.

Dass gesagt wird, würde ich sagen Sie könnten versuchen, mit der Eigenschaft height Herumspielen ... aber ohne CSS ist es schwer zu sagen, was los ist.

Ein weiterer Trick auf der Umhüllung einen Hintergrund zu fälschen setzt, dass die linke div nach unten den ganzen Weg expandiert. Linke und rechte Schwimmer links und rechts mit fester Breite und es sieht gut aus.

EDIT:

Ok, nachdem die CSS seing, würde ich sagen, dass Sie wollen, was zu tun ist, eine klare hinzuzufügen: sowohl am Ende der Verpackung als solche:

<div class="wrapper">
    <div class="left">picture</div>
    <div class="right">
        <div class="title"> title</div>
        <div class="content">body</div>
    </div>
    <div style="clear both;"></div>
 </div>

Dann wird die „Hack“, die für die funktionieren würde dies den Hintergrund zu setzen, die normalerweise in links in der Hülle sein würden. Wie diese wird es so aussehen, dass Linke gestylt wird, wenn wirklich es ist der Wrapper, der das Styling enthält.

By the way, nicht div.class gehen, nur verwenden .class-

Answer 2

Ich vermute, Sie bräuchten Schwimmer enthalten mit

div.wrapper { overflow:hidden; }

Aber es würde helfen, wenn Sie einige CSS tatsächlich eingefügt.

Edit: 100% Höhe zu replizieren mit Säulen eine einfache Art und Weise wie zuvor auf faux Säulen stützen erwähnt, stellen Sie ein Hintergrundbild auf div.wrapper (background: url (repeat.gif) repeat-y;) und töten, die 100% Höhe auf den Säulen, weil das keine Auswirkungen haben.