Div Container größe anpassen
 

Hallo,

ich habe ein Problem, bei dem ich leider nicht weiter weiß, da mir einfach das WIssen fehlt:(

Ich möchte in meinem Onlineshop auf der Startseite 3 Grafiken platzieren. Das habe ich nun über position:absolute gelöst, aber das Problem ist, dass z.B. auf einem Tablet sich alles verschiebt.

Die Conatiner sollen so aufgebaut werden, dass die Grafiken immer gleich aussehen - also eine variable Größe im Zusammenspiel aller 3 Dateien.

Das linke Bild hat eine Größe von 654px x 311px, die beiden rechten eine Größe von je 228px x 155px.

Wie kann ich das lösen?

Als Bild habe ich eingefügt, wie es aussehen soll:

http://backdra.com/mediafiles/Bilder/forum.jpg

Leider sieht es auf dem Handy z.B. so aus:

http://backdra.com/mediafiles/Bilder/forum2.jpg

Hier der Laiencode :)

<style type="text/css">

}
#startwrap {
display: block;
padding-bottom: 311px;

}
#startlinks {
position: absolute; top:0px; left:0px;
}
#startrechts {
position: absolute; top:0px; left:654px;
}
#startrechts2 {
position: absolute; top:155px; left:654px;
}

</style>
<div id="startwrap">
<div id="startlinks"><a href="../navi.php?suchausdruck=backdra&JTLSHOP=698b0a3447fc 87d4c6d031a097ab6d6f" target="_self"><img alt="" src="http://backdra.com/mediafiles/Bilder/Startseite1.png" style="width: 654px"/></a>
</div>

<div id="startrechts">
<a href="../navi.php?suchausdruck=002&JTLSHOP=b8187e529663b85e 39c83249354e2010" target="_self"><img alt="" src="http://backdra.com/mediafiles/Bilder/Startseite2.png" style="max-width: 100%" /></a>
</div>

<div id="startrechts2">
<a href="../Jugendfeuerwehr-Line" target="_self"><img alt="" src="http://backdra.com/mediafiles/Bilder/Startseite3.png" style="max-width: 100%" /></a>
</div>


</div>



Wäre toll, wenn mir hier jemand helfen könnte.

Simple Lösung? Ohne position: absolute; arbeiten.

Danke erst einmal für deine Antwort.
Ich sagte ja, dass ich da nicht viel Ahnung habe. Deswegen bringt mich der Rat nicht weiter.
Ich habe die absolute positionen rausgenommen und nun schaut es ganz und gar komisch aus Siehe Anlage.

Code schaut jetzt so aus:

<style type="text/css">

}
#startwrap {
display: block;
padding-bottom: 311px;

}
#startlinks {
}
#startrechts {

}
#startrechts2 {

}

</style>
<div id="startwrap">
<div id="startlinks"><a href="../navi.php?suchausdruck=backdra&JTLSHOP=698b0a3447fc 87d4c6d031a097ab6d6f" target="_self"><img alt="" src="http://backdra.com/mediafiles/Bilder/Startseite1.png" style="width: 654px"/></a>
</div>

<div id="startrechts"></div>

<div id="startrechts2">
<a href="../Jugendfeuerwehr-Line" target="_self"><img alt="" src="http://backdra.com/mediafiles/Bilder/Startseite3.png" style="max-width: 100%" /></a>
</div>


</div>

Bei den „.hlist“-en („Neu im Sortiment“, „Unsere Bestseller“, …) hast Du bereits eine Formatierung (die Listenelementen floaten), die Du auch bei den drei (jetzt vier) Grafiken au der Startseite anwenden kannst.
Nur die Breiten sind eben anders. Beispielsweise bekommt dann #startlinks eine Breite von 80%, die #startrechts, #startrechts2 und #startrechts3 jeweils eine Breite von 20%.

Nachtrag:
Die Links und die Bilder selbst müssen dann natürlich genau so breit sein, wie die startlinks, startrechts DIVs – „width: 100%;“.