css: wie man ein zentriertes Div mit minimalem Abstand auf der linken Seite erstellt

Question

Also habe ich in den letzten Tagen versucht, folgendes zu erreichen:

Die Idee ist, ein div (rot) zu haben, das letztlich zentriert ist (mit margin:auto;), und auf der gleichen Ebene (x-Achse) ein anderes div, das eine feste Größe hat (blau).

Auf einem ausreichend großen Bildschirm, maximiert, sieht es großartig aus. jetzt der Spaß Teil ist, wenn mit einem kleineren Bildschirm und / oder die Größe des Fensters. wegen der automatischen Marge, einer der divs überlappt die anderen:

Genau das möchte ich verhindern. (zur Erklärung: rot ist das Menü, blau ist das Logo)

Die erste Idee war also, das rote Div um die benötigten Pixel des blauen Divs nach rechts zu verschieben, indem man padding-left:??px verwendet;

aber das macht das rote Div nicht mehr absolut zentriert, sondern gepolstert ??px nach rechts. bildlich in einer zusätzlichen Box (grau) zentriert.

Die zweite Idee ist, ein weiteres (transparentes) Div rechts vom roten Div zu erstellen, aber das führt dazu, dass die Mindestbreite der gesamten Website nicht mehr eingehalten werden kann:

mit anderen worten: der scrollbalken wird viel zu früh sichtbar. er sollte erst erscheinen, wenn das fenster kleiner ist als die summe der pixel des roten und blauen div zusammen. und nicht, wie in img 4, wo er erst erscheint, wenn das fenster kleiner ist als die summe der pixel des roten div und beide divs rechts und links davon).

Was ich also will, ist das: zwei divs, die sich nicht überlappen (auch nicht bei Größenänderung), das rechte in einer festen Größe, das linke in der Mitte des Fensters, ohne dass ein ghost div entsteht, das bei niedrigen Auflösungen Leerraum erzeugt. oh und bitte kein Javascript, wenn möglich.

Ich hoffe, meine Erklärungen haben ein wenig geholfen, meine Idee zu verstehen. und ich hoffe außerdem, dass mir jemand mit einer tollen Idee oder einer übersehenen Funktion weiterhelfen kann.

Answer 1

Ich nehme es zurück... es ist geringfügig möglich... mit einer Menge hackiger Codierung...

http://jsfiddle.net/7myd4/2/

http://jsfiddle.net/7myd4/2/show

Dort finden Sie den Code und die Demo. Es beinhaltet einen Wrapper, Padding, relative Positionierung und ein wirklich hakeliges Layout :P

---

EDITAR:

Wenn ich mir diese Antwort von vor über zwei Jahren noch einmal ansehe... bin ich zu dem Schluss gekommen, dass diese Antwort schrecklich ist.

Ich habe sie mit Code-Beispielen und einer neuen Demo aktualisiert (der einzige Unterschied sind Formatierungsänderungen und das Verschieben von Inline-Styles in Klassen)

---

HTML

<div class="firstdiv"></div>
<div class="seconddiv">
    <div class="innerdiv"></div>
</div>

CSS

body{
  padding:10px 0px;
}

.firstdiv {
    background-color:#ddd;
    position:fixed;
    left:0px;
    width:200px;
    height:200px;
}

.seconddiv {
    margin:0 auto;
    width:300px;
    height:150px;
    padding-left:400px;
    position:relative;
    left:-200px;
}

.innerdiv {
    background-color:#ccc;
    width:300px;
    height:150px;
}

---

Demo: http://jsfiddle.net/7myd4/55/show
Quelle: http://jsfiddle.net/7myd4/55/

Answer 2

Verwenden Sie Javascript, um die Breite des div auf der Grundlage der Fensterbreite zu ändern. oder verwenden Sie CSS-Stapel, um die maximale Breite des Bildschirms zu überprüfen und haben css für diese Größe.

http://api.jquery.com/width/

http://api.jquery.com/resize/

oder sehen Sie sich diesen Stapel an.

Wie kann man die Abmessungen von Bildern/Divs je nach Fenstergröße dynamisch ändern?