✔ Div mittig positionieren

timestamp

timestamp

Mitglied Käsekuchen
Hi

Ich weiß, dass dieses Thema ziemlich oft vorkommt. Nur stehe ich gerade auf dem Schlauch. Ich habe eine Seite, deren Inhalt (div#outer) mittig platziert werden soll. Das funktioniert auch. Wenn ich den gleichen CSS Code jetzt auf zwei divs im inneren Anwende, funktioniert es nicht. Es wird immer noch links angezeigt: Es geht um die beiden content divs:

HTML: 
<body>
  <div id="outer">
    <div id="header"></div>
    <div id="menu">
      <ul>
        <li>Navigation</li>          
      </ul>
    </div>
    <div id="content_outer">
      <div id="content_inner">
      </div>
    </div>
    <div id="footer">
    </div>
  </div>
 </body>

CSS: 
html,
body{
  padding: 0;
  margin: 0;
  text-align: center;
}

div#outer{
  text-align: left;
  margin: 50px auto 0;
  width: 800px;
  min-height: 600px;
  background-color: #bfbfbf;
}
div#header{
  width: 800px;
  height: 130px;
  background-repeat: no-repeat;
  background-image: url("./images/backgrounds/header.png");
}
div#menu{
  width: 150px;
  float: left;
}
div#content_outer{
  width: 625px;
  text-align: center;
  float: left;
  margin-left: 25px;
}
div#content_inner{
  width: 625px;
  margin: 0 auto 0;
  text-align: left;
}
 
Hi,

wenn #content_outer im Anzeigebereich von #outer horizontal zentriert werden soll, ist die enthaltene float:left-Regel dafür hinderlich.

mfg Maik
 
Ich weiß jetzt nicht ob ich dich da missverstehe, aber es soll content_inner in content_outer mitting positioniert werden.
Wie kann ich die denn nebeneinander darstellen, ohne positon: absolute und float:left zu benutzen? :) Bzw: Was wäre eine Lösung für das Problem?
 
Du hast mich nicht mißverstanden.

Und wie soll die horizontale Zentrierung des Nachfolgerelements vonstatten gehen, wenn es die Breite des Elternelements besitzt?

mfg Maik
 
Ich habe jetzt mal die floats entfernt und die Breite des Elternelements (#content_outer). Jetzt wird es zentriert angezeigt nur eben leider nicht neben der Menüleiste. Wie kann ich es denn jetzt wieder "daneben schieben"?

edit: Zum besseren Verständnis:
So stelle ich mir das Ganze vor.
 

Anhänge

  • Unbenannt.png
    Unbenannt.png
    918 Bytes · Aufrufe: 816
Zuletzt bearbeitet:
Wie gesagt, wenn du #content_inner im Anzeigebereich seines Elternelements #content_outer horizontal zentrieren willst, sollte es dafür auch eine geringere Breite besitzen, damit margin:0 auto überhaupt Wirkung zeigen kann, andernfalls wandel seine text-align:left-Regel in text-align:center um, damit der Elementinhalt entsprechend ausgerichtet wird.

mfg Maik
 
Maik, du bist ein Genie :) Ich habe die floats jetzt wieder eingesetzt und die Breite des inneren Elements um 50px im Vergleich zum Elternelement verringert und es ist so wie ich wollte :) Genial!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück