Position Relative und Float Left

sentino · 13. September 2013

Und zwar habe ich ein Problem, so sollte es aussehen:
Bild

Aber sobald ich 2 Boxen habe, brauche ich ja float: left und dann geht mein Gelber Background nicht mehr mit:
Bild

Hier meine Index:

HTML:

<!doctype html>
<html lang="de">

<head>
<meta charset="UTF-8">
<title>Ticket Support Beta</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

 
<div id="Header">
<div id="iHeader">

Dies ist eine Vorlage falls Sie Probleme / Hilfe brauchen. Mit dieser Vorlage können wir Ihnen schneller helfen und es erleichert unsere Arbeit.

</div> 
</div>

<div id="Content">
<div id="iContent">
 
<div class="Kasten">
<p>Sie haben neue Mitarbeiter die ein Benutzerkonto benötigen? Dann klicken Sie hier.</p> 
</div> 
<div class="Kasten">
<p>Sie haben neue Mitarbeiter die ein Benutzerkonto benötigen? Dann klicken Sie hier.</p> 
</div> 

</div>
</div>

<div id="Footer">
<div id="iFooter">
Falls es wircklick ein dringender Notfall ist rufen Sie unter folgende Nummer an: 08257 54645464.
</div> 
</div> 

</div>
</body>
</html>

Hier meine CSS:

Code:

body {
font-family: Georgia, Helvetica, sans-serif;
width:100%;
min-width: 700px; 
height:100%;
background: white;
padding:0;
margin:0;
}

#Header {
position: relative;
background: blue;
width: 100%;
height: auto;
padding-top: 25px;
padding-bottom: 25px;
}

#iHeader {
position: relative;
background: #c49071;
-webkit-box-shadow: 0px 0px 5px #aaaaaa; 
-moz-box-shadow: 0px 0px 5px #aaaaaa; 
box-shadow: 0px 0px 5px #aaaaaa;
width: 80%;
left: 10%;
margin:auto 0px;
padding:8px 8px;
font-size: 18px;
color: #ffffff; 
text-shadow: 0px 1px 0px #353535; 
}

#Content {
position: relative;
background: yellow; 
width: 100%;
padding-top: 25px;
padding-bottom: 25px;
height: auto;
}

#iContent {
position: relative;
width: 80%;
left: 10%; 
}

.Kasten {
float: left;
background: green;
width: 350px;
}

#Footer {
position: relative;
background: red;
width: 100%;
height: auto;
padding-top: 25px;
padding-bottom: 25px;
clear: both;
}

#iFooter {
position: relative;
background: #8a8a8a;
-webkit-box-shadow: 0px 0px 5px #aaaaaa; 
-moz-box-shadow: 0px 0px 5px #aaaaaa; 
box-shadow: 0px 0px 5px #aaaaaa;
width: 80%;
left: 10%;
margin:auto 0px;
padding:8px 8px;
font-size: 18px;
color: #ffffff; 
text-shadow: 0px 1px 0px #353535; 
}

Was ist mein Fehler? Wie kriege ich es richtig hin? Ich finde leider keine Lösung :/

Anzeige

GaYlORd · 13. September 2013

AW: Position Relative und Float Left

unter die beiden boxen:

<div style="clear:both"></div>

sentino · 13. September 2013

AW: Position Relative und Float Left

Danke dir, hat funktioniert. Was genau bewirkt clear:both? Kannst du mir des bitte noch erklären.

GaYlORd · 13. September 2013

AW: Position Relative und Float Left

Gern:
Wenn du ein Element Float gibst, sollen alle anderen elemente darum fließen.
clear left, right, both) löst diesen Fluss wieder auf und sagt, dass ab hier nicht mehr um die Float-Elemente geflossen werden soll.
Mehr auf: clear: Umfließen von Elementen beenden: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Nanobyte · 13. September 2013

AW: Position Relative und Float Left

Interessant für dich ist noch folgendes:

A new micro clearfix hack

Murdoc · 13. September 2013

AW: Position Relative und Float Left

Mit float zu arbeiten ist obsolet. Besser ist display:inline-block oder gleich mit flexbox.

sentino · 19. September 2013

AW: Position Relative und Float Left

Danke für den Tipp. So funktioniert es gleich besser und es ist egal wie die Auflösung ist.

Nützliche Suchen

Position Relative und Float Left

Videos zum Themenbereich