Box nicht mittig

#AnymRolex* · 04/30/2015, 19:52

Hey,

Ich bekomme immer den Fehler das die Box nicht mittig ist und meine Div boxen den main berreich überschreiten siehe Bild.

Bild nicht mittig:

Spoiler

Bild überschreitet die main box , das oben im Hintergrund ist die main box der Rest mit den Text sind die Div boxen:

Spoiler

HTML Code:

Spoiler

PHP Code:


			
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta lang="de">
<title> Index </title>
<link rel="stylesheet" href="test.css" type="text/css">

</head>

<body>

<div id="header">

        <ul class="navi">
        <a class="title">Test</a>
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Project</a></li>
        <li><a href="#">Forum</a></li>
        </ul>

    
</div>

<div id="main">

    <ul class="part">

    <div class="box">
    <p>HLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    
    <div class="box2">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    
    <div class="box3">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    
    </ul>
    
</div>


</body>

</html>

CSS Code:

Spoiler

Kennt wer ne Lösung dafür?

phlinther1 · 05/02/2015, 09:42

Zum 1. Problem: Mit margin:auto kann man die Box nur dann horizontal zentrieren, wenn sie eine feste Breite hat und nicht nur width:auto. Eine einfache Möglichkeit, die mir spontan einfällt, wäre, um die 3 Boxen mit dem Text einen weiteren div Container zu erstellen, in dem sich diese Boxen dann befinden. Dieser bekommt dann die Eigenschaften display:table (Darstellung als Tabelle) und margin:auto. Schon sollte es mittig sein.

Zum 2. Problem: So wie ich das sehe hast du nirgends ein "clear" drin. Wenn du Container floatest, muss du unter diesen Containern etwas Ähnliches wie <br style='clear:both;' /> (irgendein Container mit der Eigenschaft clear, kannst natürlich so verändern wie du es brauchst) einfügen, damit die Höhe der gefloateten Container angenommen wird.