div-Container positionieren bei kleinerem Screen

Doli · 21.01.2014

Hallo zusammen

Eine Frage an Euch:
Ich habe 3 div's nebeneinander: [div1] [div2] [div3]
div1 und div3 sind eine Art Skyscraper, div2 enthält den Content.

Gibt es mit CSS die Möglichkeit, div3 unter div1 zu setzen, wenn der Besucher mit einem mobilen Device (Tablet) auf die Seite kommt? Also ein Wechsel zu einem 2spaltigen Layout, die beiden Skyscraper untereinander und den Content rechts daneben?
Oder muss ich speziell für mobile Geräte eine eigene css schreiben?

Danke sehr schonmal im voraus für Eure Tipps.

woffi · 21.01.2014

Naja, extra-CSS für mobile Geräte ist sozusagen die normale Lösung. Du bindest das CSS mit soetwas ein:
<link href="mobil.css" type="text/css" rel="stylesheet" media="only screen and (max-width: 300px)" />

hub · 21.01.2014

Moin moin,
einmal kannst mit min-width eine Mindestgröße angeben, dann bricht es automatisch um wenn es eng wird, oder du arbeitest mit media querys oder du machst es, wie woffi es schreibt ...

Gruß Ulli

Jormungand · 21.01.2014

Wenn du dich näher damit auseinandersetzen willst, wäre dein Suchwort "responsive webdesign". Je nach Größe des Viewports werden die Container schmaler oder brechen um.
Eine eigene CSS-Datei ist für diese Methode nicht nötig.

cythux · 22.01.2014

Mittels Mediaqueries, könntest du Flexbox nutzen

Bitte kostenlos registrieren, damit du die Links siehst.

Doli · 22.01.2014

Danke Euch für die Antworten. Ich schau mir das mit Deinen Links mal an, cythux. Sonst komm ich wohl nicht drum herum, eine css für mobile Geräte zu schreiben.

cythux · 22.01.2014

Doli schrieb:
Danke Euch für die Antworten. Ich schau mir das mit Deinen Links mal an, cythux. Sonst komm ich wohl nicht drum herum, eine css für mobile Geräte zu schreiben.

Du brauchst keine extra CSS zu schreiben, diese kannst du in deiner vorhanden CSS intergieren wie hier zb