Frage Div an größe eines Bildes mit with: 45% anpassen.

[gumpo03]

Hi. Ich habe folgendes Problem das ich auch nach einigem Herumprobieren nicht lösen konnte.
Ich habe Folgende Struktur:

<style>
.wrapper {
--Sollte so hoch sein wie Bild 1 oder 2 (sind beide gleich groß)
}
.auswahl {
overflow:scroll;
height: 100%;
width: 20%;
float:left;
}

.anzeige {
float:left;
width:80%;
height:100%;
}

.anzeige img {
width:45%;
height:auto;
}

</style>

<div class="wrapper">
  <div class="auswahl">
    Sehr lange Liste welche über den Bildschirmrand hinausragen würde, aber durch Overflow:scroll auf die richtige Größe gebracht wird.
  </div>
  <div class="anzeige">
    <img src="bild1">
    <img src="bild2">
  </div>
</div>

Mein Problem ist, dass erstens durch das float:left bei einer nicht angegebenen Größe des wrappers der ganze Inhalt ineinander geschoben wird. Das ist aber das Geringere Problem (Wahrscheinlich durch clearfix zu lösen). Das größere ist, dass durch die Länge der 'Auswahl' Liste an diesem die Größe des Wrappers definiert werden würde. Ist es irgendwie möglich, anhand der Größe der Bilder die Größe des Trappers zu definieren?

Danke

EDIT: Also die sinnvollste Lösung die mir gerade einfällt wäre wenn ich irgendwie die Größe des nebenstehenden Elements auf das Element übertragen könnte. Bzw. wenn ich die html Struktur ändere und so die Liste als Tochterelement des Auswahl divs festlege und dann die Höhe übergebe. Leider wird ja aber nicht die Pixelzahl übergeben sondern nur die height: auto.

Ich komme einfach auf keine funktionierende Lösung..

 

[MrMurphy]

Hallo

Ich würde dir gerne helfen. Aber weder aus deinem Text noch aus den Quellcodeschnipseln kann ich dein Problem nachvollziehen.

Gruss

MrMurphy

 

[djheke]

Vlt so.

* {
margin:0;
padding:0;
}
.wrapper {
background:#eee;
overflow:hidden;
/* Oder float:left;width:100%;*/
}
.auswahl {
width: 20%;
float:left;
}
.anzeige {
float:left;
width:80%;
}
.anzeige img {
width:50%;
height:auto;
float:left;
}

Du kannst auch mal nach flexbox googeln.

 

[gumpo03]

Hallo

Ich würde dir gerne helfen. Aber weder aus deinem Text noch aus den Quellcodeschnipseln kann ich dein Problem nachvollziehen.

Gruss

MrMurphy

Ok, ich verscheuche noch einmal es anders zu erklären:

<style>
.wrapper {
--Sollte so hoch sein wie Bild 1 oder 2 (sind beide gleich groß)
}
.auswahl {
overflow:scroll;
height: 100%;
width: 20%;
float:left;
}

.anzeige {
float:left;
width:80%;
height:100%;
}

.anzeige img {
width:45%;
height:auto;
}

</style>

<div class="wrapper">
  <div class="auswahl">
    Sehr lange Liste welche über den Bildschirmrand hinausragen würde, aber durch Overflow:scroll auf die richtige Größe gebracht wird.
  </div>
  <div class="anzeige">
    <img src="bild1">
    <img src="bild2">
  </div>
</div>

Das Div 'Wrapper' umschließt den gesamten darzustellenden Inhalt um den es hier gerade geht. Dabei handelt es sich wieder um 2 Divs die mit float nebeneinander positioniert werden. Links ist eine Liste aus der man auswählen kann. Rechts ist die Anzeige mit 2 Bildern X, welche beide die gleiche Höhe besitzen. Die Größe der Bilder wird mit einer % Angabe festgelegt damit sie mit der Seite mitskalieren.
Die Liste ist sehr Lang, deshalb mit Overflow Scroll ausgestattet und soll so hoch sein wie die Bilder. Genauso auch der Wrapper. Leider ist bisher jeder Lösungsansatz fehlgeschlagen.
Vielleicht kann mir ja jemand von euch einen Denkanstoß oder direkt ein Funktionierenden Codeschnipsel geben.

Ich hoffe das ist jetzt verständlicher.
Danke :)

 

[gumpo03]

Vlt so.

* {
margin:0;
padding:0;
}
.wrapper {
background:#eee;
overflow:hidden;
/* Oder float:left;width:100%;*/
}
.auswahl {
width: 20%;
float:left;
}
.anzeige {
float:left;
width:80%;
}
.anzeige img {
width:50%;
height:auto;
float:left;
}

Naja, dann habe ich aber ja immer noch das gleiche Problem, dass der Wrapper die Größe des Größten Objekts in ihm annimmt und das ist dann die Liste. Heißt der Wrapper ist 2 Bildschirmgrößen Lang was ziemlich unschön aussieht (Und auch nicht automatisch mitskaliert wird)..
Flexbox Google ich jetzt aber mal.

 

[djheke]

Na dann so

* {
 margin:0;
 padding:0;
}
.wrapper {
 background:#eee;
 overflow:hidden;
position:relative;
}
.auswahl {
 position:absolute;
 top:0;
 left:0;
 bottom:0;
 width: 20%;
 overflow:auto;
}
.anzeige {
margin-left:20%;
width:80%;
}
.anzeige img {
width:50%;
height:auto;
float:left;
}