nicht angemeldet
Zwei DIVs nebeneinander
Matthias Apsel
Gunnar BittersmannHallo,
ich möchte zwei DIVs nebeneinander positionieren. Das habe ich mit "float:left" auch gut hinbekommen.
Ich möchte nun aber erreichen, dass wenn das Browserfenster zu schmal ist, die DIVs weiterhin nebeneinander sind und dann ein horizontaler Scrollbalken angezeigt wird.
Derzeit habe ich folgenden HTML-Code:
<style type="text/css">
div {
float: left;
padding: 10px;
border: 2px;
border-style:solid;
}
</style>
<body>
<div style="padding-top:450px;margin-left:100px;width:300px;">
<a href="https://login">
<img src="img1.jpg" style="border-style:none;"/><br/>
</a>
</div>
<div style="text-align:center;">
<img src="./images/z.jpg" >
</div>
</body>
-
Om nah hoo pez nyeetz, spritti98!
Du kannst minimale und maximale Abmessungen vergeben.
Matthias
--
1/z ist kein Blatt Papier.
-
Das verstehe ich jetzt nicht ganz. Kannst Du mir sagen, was ich konkret ändern muss? Habe schon mal mit "width:100%" probiert. Das hat aber leider nicht funktioniert.
-
@@spritti98:
nuqneH
Habe schon mal mit "width:100%" probiert.
Wie breit muss denn dein Container sein, damit 300 Pixel und das Bild nebeneinander passen?
Alternativ: Nicht float, sondern inline-block und 'white-space: nowrap' verwenden.
Qapla'
--
Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)-
@@spritti98:
nuqneH
Habe schon mal mit "width:100%" probiert.
Wie breit muss denn dein Container sein, damit 300 Pixel und das Bild nebeneinander passen?
Das hängt ja gerade von dem Bild ab (das wird random über PHP eingehängt)
Ich weiß lediglich, dass der linke DIV-Bereich 300 Pixel breit sein muss. Was rechts passiert, ist mir egal. Dafür will ich ja gerade den Scrollbalken haben.Alternativ: Nicht float, sondern inline-block und 'white-space: nowrap' verwenden.
Ich bekomme es damit leider auch nicht hin :(
-
@@spritti98:
Ich bekomme es damit leider auch nicht hin :(Lösung:
<body>
<div style="margin-right:0;margin-left:auto;">
<p style="width:300px;float:left;padding-top:450px;margin-left:100px;">
<a href="https://login">
<img src="img1.jpg" style="border-style:none;" alt="Grafik"/>
</a>
</p >
<p style="padding-left:10px;">
<img src="./images/z.jpg" alt="Image2"/>
</p>
</div></body>
-
@@spritti98:
Das war leider doch nicht die Lösung - da habe ich zu früh gefröhnt.
Das funktioniert nur, wenn das div wie folgt formatiert wird:<div style="width:1500px;margin-right:0;margin-left:auto;">
Die Breitenangabe in diesem DIV finde ich aber extrem unschön, da ich nicht weiß, wie breit das Bild auf der rechten Seite denn nun ist.
-
-
-
-
-