Zwei divs zentriert untereinander anordnen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

15:45, 23.6.2014

Hallo erstmal:)

Ich habe (mal wieder) ein kleines Problemchen mit CSS

Es geht darum eine Box mit Test u.Ä. auf der Seite Horizontal zentriert "schweben" zu lassen, und darunter eine Box mit mehreren Icons zu haben, auch zentriert. Funktioniert beides bisher auch sehr gut, nur kann sich die Größe der oberen Box ändern, weswegen sie absolut gesetzt ist und die Box darunter (immer ca. gleich breit) relativ. Nun wird aber die zweite Box vor der ersten angezeigt was aber genau umgekehrt sein sollte.

Hier erstmal der (relevante) Code:

html, body{



background-color:#efefef;


}

/*Content*/

#content {

min-width:350px;
/*
width:1050px;
*/

position:absolute;

left:75px;
right:75px;

min-height:500px;

clear:both;

margin-left:auto;
margin-right:auto;

margin-top:35px;
margin-bottom:5px;

background-color:#ccc;
color:#000;

border-radius:45px;

border-style:solid;
border-color:#b5b5b5;
border-width:2px;

z-index:1;
}


/*Icons*/
#icons {

min-width:350px;


height:auto;


position:relative;


margin-top:10px;

margin-left:auto;
margin-right:auto;

text-align:center;

z-index:0;
clear:both;
}

img.icon {


height:32px;
width:32px;

float:center;

}

Und die Html-Seite dazu:

<html>

<head>

<title>Website</title>
<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="css/style.css" />


</head>

<body>


<div id="content">

</div><!--Content Ende-->

<div id="icons">

<img class="icon" src="img/icons/message.png" />

<img class="icon" src="img/icons/info.png" />

<img class="icon" src="img/icons/server.png" />

</div><!--Icons Ende-->











</body>

</html>

Gesucht hab ich auch nach dem Thema hier und anderswo schon, aber entweder hab ich nichts passendes gefunden oder ich wurde daraus auch nicht schlau.. (über verlinkung zu passenden antworten freu ich mich aber immer :D)

lg gr4v3l

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
robin

robin hat kostenlosen Webspace.
12:00, 25.6.2014
probier doch mal beim #content
```
position:relative;
max-width:1050px;
```

~~m******e~~

15:33, 25.6.2014

Mögliche Lösung:
Die betreffenden Div's einfach in eine Hülle packen, also einen "Wrapper".

Der Wrapper bekommt dann die Anweisung

position: absolute;

, und die darin befindlichen Div's die Anweisungen

position: relative;

.

Online-Beispiel > Div's zentriert untereinander <

CSS:

html, body{
background-color:#efefef;
}

#wrapper {
position:absolute;
left:75px;
right:75px;
}

#content {
position:relative;
min-width:350px;
min-height:500px;
clear:both;
padding:20px;
margin-left:auto;
margin-right:auto;
margin-top:35px;
margin-bottom:5px;
background-color:#ccc;
color:#000;
border-radius:45px;
border-style:solid;
border-color:#b5b5b5;
border-width:2px;
z-index:1;
}

#icons {
position:relative;
min-width:350px;
height:auto;
margin-top:10px;
margin-left:auto;
margin-right:auto;
text-align:center;
z-index:10;
clear:both;
}

img.icon {
height:32px;
width:32px;
float:center;
}

HTML (im Body):

<div id="wrapper">
<div id="content">
Inhalt
</div>
<div id="icons">
<img class="icon" src="img/icons/bla.gif" />
<img class="icon" src="img/icons/bla.gif" />
<img class="icon" src="img/icons/bla.gif" />
</div>
</div>

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city