✔ Div's ohne feste Höhe - letzter Div soll Abstand haben

G

GFX-Händchen

Erfahrenes Mitglied
Hi all,

ich weiß nicht nach was ich genau googlen muss:-(.... daher wohl auch ein falscher Betreff?!

Folgendes Szenario:
Habe einen Div-Wrapper ohne feste Höhe, diesem habe ich ein ausreichend großes Hintergrundbild (welches auf der x-Achse wiederholt wird) zugewiesen.
Nun habe ich darin mehrere Div-Container (ohne feste Höhe - sollen sich alle dem Inhalt anpassen;)) und möchte, dass sich der unterste DIV-Container ca. 20px vom Wrapper-Div "absetzt", also der Wrapper 20px länger ist.

Bisher ist es so, dass der letzte Div-Container auf der gleichen Höhe mit dem Wrapper-Div abschließt.
Ein
HTML: 
margin-bottom: 20px
dem letzten DIv-Container zugeordnet brachte leider keinen Erfolg.

Sollte man dem Wrapper-Div ein min-height zuweisen?:confused:
Bringt aber wohl nichts, wenn man den andere Div's keine feste Höhe geben kann.
 
Hi,

versuch es stattdessen mal mit padding-bottom für das umschließende DIV.

mfg Maik
 
Danke!:)

Die Kombination brachte das Ergebnis was ich wollte:
Code: 
margin-bottom: 20px:
padding-bottom: 20px;

Zudem hab ich die ganze Zeit am falschen Div "rumgespielt":-(

Welche Namen nehmt ihr für eure Div-Container?
-Wrapper, Content.....
 
Übrigens funktioniert's bei mir auf deine geschilderte Weise ;-)

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-06-17" />

<title>tutorials.de | Div's ohne feste Höhe - letzter Div soll Abstand haben</title>

<style type="text/css">
/* <![CDATA[ */
div {
border:1px solid #ddd;
margin:5px 20px;
}
#wrapper {
border-color:#aaa;
}
#last {
margin-bottom:20px;
}
/* ]]> */
</style>

</head>
<body>

<div id="wrapper">
     <div>
          <h1>box 1</h1>
     </div>
     <div>
          <h1>box 2</h1>
     </div>
     <div id="last">
          <h1>box 3</h1>
     </div>
</div>

</body>
</html>


Es sei denn, du hast hier etwas Elementares verschwiegen :p

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück