div über restliche Breite strecken

html.de-Forum HTML, XHTML & CSS
1

Hallo zusammen,

ich hab folgendes Problem.

Ich habe einen Bereich mit 700px Breite. In diesen Bereich soll ein Bild (rechts) mit variabler Breite und ein div mit Inhalt mit der restlichen Breite.

Ich hab folgenden Code produziert:
[HTML]

.outer { width: 700px; height: 100%; background-color: red; margin: 0 auto;} 
    .outer .content { float: left; background-color: yellow;}
    
    .outer img { background-color: green; float: right;}
</style>

<div class="outer">
    <div class="content">
        <h1>Überschrift</h1>
        <p>Text 1</p>
        <p>Noch weitere Text</p>
    </div>
    <!-- img.width ist kein bekannter Wert !-->
    <img src="" width="225"/>        
</div>
[/HTML]Das gibt folgendes Ergebnis: http://www.html.de/attachment.php?attachmentid=1196&stc=1&d=1259249401

Ich hätte aber gerne diese Ergebnis:

http://www.html.de/attachment.php?attachmentid=1197&stc=1&d=1259249408

Was fehlt mir noch?
Ist das so überhaupt möglich?

Gruß KY

2

hmm… also ich arbeite immer mit ids^^ und mit nem wrapper:

[HTML]#wrapper {
margin: 0 auto;
width: 700px; // Gesamtbreite →
}

#content {
float: left;
color: #333;
background-image: url(„http://desb.bplaced.net/homepage/img/content.gif“);
height: 350px; // höhre des contents →
width: 600px; // breite des contents →
display: inline;
}
#rest {
width: 100px; //das, was halt vond en 700 noch übrig ist: 700-600=100^^

und dann halt im body:

u.s.w[/HTML]

3

Hi,

danke für dein Beispiel
Das funktioniert auch, aber ich weiß nicht wie Breit mein Bild ist,
kann also nicht ausrechnen wie viel Rest bleibt.
Das müsste irgendwie dynamisch gehen.

Hat sonst noch jemand Ideen?

Gruß KY

4

hmm…also ich kenne mich nicht soo gut mit html aus^^…ich glaube etwas dynamisches geht nicht…aber du kannst die größe des bildes herrausfinden, indem du es auf deinen desktop hast, es einmal anklicktst und dann den mauszeiger nachdem du es angewählt hast auf dem bild ruhen lässt. Dann erscheint die größe. oder du siehst einfach in einem bild-bearbeitungsprogramm wie das einafche paint oder so nach^^

5

outer .content sollte noch ein width:100% bekommen denke ich, sonst wird’s an den inhalt angepasst.

6

hi,

danke sysop, leider funktioniert das auch nicht.
Dann hab ich zwar die volle Breite, aber dann geht das gelbe über die komplette Breite und das grüne rutscht in die zweite Zeile.

Gibts weiter Ideen?

Gruß KY