• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

2divs: 1x zntriert, 1x rechts

P

pangu

Neues Mitglied
wie kann ich zwei divs nebeneinander so positionieren, dass das eine genau horizontal zentriert, das zweite genau horizontal ganz rechts am browserfenster klebt? vertikal beliebig, bzw. 100pixel von oben.
divdiv.jpg

und zwar soll sich das zentrierte div (wenn man das browserfenster verkleinert) nach links verschieben (dann also nicht mehr zentriert sein), sobald das fenster so klein ist, dass das rechte div an es "anstößt", so das die minimalste version ist, dass die beiden divs nebeneinander die browserbreite ausfüllen. danach wenn der user das fenster noch kleiner macht, soll erst der scrollbalken erscheinen.

thx
 
Zuletzt bearbeitet:
Hmm, das ist nicht ganz trivial. Nehmen wir mal an, beide Divs wären 100 Pixel breit. Dann würden sie sich berühren, wenn der Viewport des Browsers 301 Pixel unterschreitet.

Man könnte den Viewport über innerWidth auslesen und über eine IF-Abfrage dem ersten Div eine CSS-Klasse hinzufügen, mit dem das Element nach links verschoben wird.
 
Versduchs mal so
Code: 
<!DOCTYPE html>
 <head>
 <style type="text/css">
#wrapper {
 float:left;
 width:100%;
}

#center {
 width:70%;
 float:left;
 margin-right:auto;
}

#center_innen {
 width:70%;
 margin-left: auto;
 margin-right:-9%;
 background:#dea;
 height:400px;
}
#rechts {
 width:30%;
 float:right;
}

#rechts_innen {
 width:30%;
 background:#09c;
 color:#fff;
 height:400px;
 margin-left:auto;

}
</style>
</head>
<body>
<div id="wrapper">

<div id="center"><div id="center_innen">Zentriert</div></div>
<div id="rechts"><div id="rechts_innen">Ich bin rechts</div></div>

</div>
</body>
</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben