Vollständige Version anzeigen : HTML: Positionierung einer div Box


DonnieDarko
26.09.2015, 18:34

Hey Leute!

Ich baue grade eine Website auf und meine Idee ist es eine Div Box zu bauen, welche selbst 3 divs beinhaltet.
Die obere div soll sich dann mittig an die Seite ausrichten mit einer maximalen Breite von 1400 Pixel.

Die 3 <div> darin, sollen nebeneinander erscheinen.

Bist grade klappte alles, als ich dann die 3 inneren divs nebenainder floaten ließ, ist der footer kollabiert.
Also hab ich diesen "clearfix" gemacht. Jetzt ist der OBERE Div nicht mehr zentral positioniert und es sieht so aus:

#attach#55849#/attach#

Hab den Ebenen eine Border gegeben damit ihr versteht, wie ich mir das vorstelle.

Hier mein Quelltext dazu:

index;html:
<body>
<header class="main-header">
</header>

<div class="wrapper">
<div class="box">
<div class="ring">
<img src="img/ringe/ring1;png" />
</div>
<div class="descrip">TEXT</div>
</div>

<div class="box">
<div class="ring">
<img src="img/ringe/ring1;png" />
</div>
<div class="descrip">TEXT</div>
</div>

<div class="box">
<div class="ring">
<img src="img/ringe/ring1;png" />
</div>
<div class="descrip">TEXT</div>
</div>
</div>
<div id="main-footer">
<footer>TEXT</footer></div>
</body>

style;css:
;wrapper{
width: 75%;
padding-left: 50px;
padding-right: 50px;
margin: auto;
max-width: 1400px;
border: solid 2px blue;
display:inline-block;
}

#main-footer{
padding:60px;
border: solid 10px orange;
font-size: 0;9em;
text-align:center;
margin:auto;
}

/* FLOATS------------------------*/

;box{
padding: 6% 10%;
border:solid 10px green;
text-align:center;
width:33;3%;
margin: 5px auto;
float:left;
}

/* FLOAT CLEARFIX------------------------*/

;group:after{
content: "";
display: table;
clear: both;
}

Es hat wahrscheinlich etwas mit dem inline-block im ;wrapper zu tun, wenn ich den wegmache, ist zwar alles mittig, aber der footer kollabiert.
Ich hoffe ihr wollt/könnt mir helfen! Danke =)

Hardware Preisvergleich | Amazon Blitzangebote!

Videos zum Thema
Video Loading...
Nanobyte
26.09.2015, 20:12

Flexbox macht das leben einfacher :-)
A Pen by Captain Anonymous (;codepen~io/anon/pen/zvooJb)


Ähnliche Themen zu HTML: Positionierung einer div Box
  • [CSS] CSS/HTML absolute positionierung in form fieldset table span
    Hallo. In google hab ich leider nichts gefunden. Das problem habe ich zwar auf andere weiße lösen können doch ich versteh einfach nicht warum es bei meinen ersten versuch nicht gelungen ist. Das wesentliche ist in form fieldset table. Die Fett gedruckten wörter sind die wichtigen. Nun zu mein [...]

  • [HTML] Bilder positionierung
    Ich hab da ein kleines Problem. Ich habe mir Adobe Dreamweaver runtergeladen und eine schöne Webvorlage. Da man in Adobe Dreamweaver in der Designeransicht auch arbeiten kann, ohne ein html Doktor zu sein dachte ich mir, ich bekomme auch eine Homepage hin. :( Also folgendes: Ich habe ein Bild hi [...]

  • [HTML] [CSS]Problem mit Positionierung
    Also ich will eine Navi leiste erstellen aber da der body-tag zentriert ist ist die navi leiste dann auch zentriest ich will es aber nach links und dann mit einen margin richten damit es unten links unter dem header ist.... hoffentlich ist das verstäntlich genug ^^ Hier ist der Code [...]

  • [HTML] div-Positionierung
    Hi. Ich habe folgendes Problem: Ich möchte eine div-Box, die sich in der gesamten Höhe des Browsers ausbreitet. Also dass der Hintergrund der div über die gesamte Höhe der Seite sichtbar ist - unabhängig von dem, was in der div ist. Habe auch schon height: 100% versucht, klappt aber nicht. [...]



raid-rush.ws | Imprint & Contact pr