CSS verkleinern container Größe zwei Breite dynamisch divs

Dies ist, was ich versuche zu erreichen

 CONTAINER 
-------------------------------------------------------------- 
| ZENTRIERT im CONTAINER | 
| ----------------------------------------- ---------- | 
| | Content-Div | | Info-Div | | 
| | verkleinert, um Inhalte ODER | | schrumpfen| | 
| | max Größe: (container-Breite - info div ) | | Inhalt | | 
| | | ---------- | 
| ----------------------------------------- | 
| | 
| ------------------------------------------------------ | 
| | text-div: width = Breite des content-div + info-div | | 
| ------------------------------------------------------ | 
-------------------------------------------------------------- 

BILDER (roh MSPAINT): kleine content-Beispiel und große content-Beispiel

DIV INFO: Max 192 Pixel, sollte aber verkleinern, wenn nötig.

DIV-INHALT: Shrink to content. Wenn der Inhalt ist groß, width= noch Platz im container.

DIV TEXT: width = Breite des INHALTS + Breite INFO.

Hier ist, was ich habe, so weit. Ich bin nicht mit Schwimmern, weil ich will die content-und info-divs werden insgesamt auf der Seite zentriert.

Die Probleme, die ich habe sind:

  • der text div erweitert, um die container-Größe.
  • wenn das browser-Fenster verkleinert wird, werden die info-div bekommt stieß auf die nächste
    line.

CSS

#container {
    width: 80%;
    min-width: 760px;
    padding-top: 0;
    margin: 0 auto; 
}
#content {
    max-width: 71%; /* Kinda solves the problem of bumping info div
                       to next line, but leave awkward gaps */
    width: auto;
    vertical-align: top;
    display: inline-block;
}
#info {
    width: auto;
    vertical-align: top;
    text-align: left;
    display: inline-block;
}
#text {
    margin: 10px auto;
    width: auto;
    display: block;
    text-align: left;
}

HTML

<div id="container">
<div id="main">
    <div id="content"><img src="image.jpg" />Lorem ipsum ...</div>
    <div id="info">Lorem ipsum dolor</div>
    <div id="text">Lorem ipsum ...</div>
</div>
</div>
  • ASCII-Kunst wireframes lassen mich lächeln.
  • Ich denke, ich könnte Größe dynamisch in Javascript, aber ich Frage mich, ob gibt es eine elegante CSS-Lösung.
  • Nur quick-Tipp: haben Sie bemerkt, dass Sie <div class="container"> und Sie gelten mit css: #container, obwohl Sie verwenden sollten .die container?
  • T_T, ich habe gerade 10 Minuten, die Fehler zu finden
  • Ist es möglich zu akzeptieren, zwei Antworten? Shaz und Myles Grau jeweils ein Teil der Gesamtlösung. Vielen Dank an Euch beide!
InformationsquelleAutor encore2097 | 2011-02-12
Schreibe einen Kommentar