Richtige Anordnung von Divs mithilfe von float

John_Thym

Hi Leute,
Bei der Programmierung meiner Homepage ist mir folgendes Problem begegnet:
Wie ihr seht kommt zuerst oben ein Header - dann mini-news -darauf folgt eine linke Seite welche mithilfe von "float" an den Main Teil "geklebt" werden soll - nach der Maindiv folgt die rechte Seite welche auch mit float an der Richtigen Stelle positioniert werden soll ... allerdings ist diese wie ihr seht nicht an der richtigen Stelle

Mein Code {HTML & CSS}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>


<body>
<!-- Wrapteil -->
<div id="Wrap">


<!-- Topteil -->
<div id="Top">
</div>
<!-- Topteil -->


<!-- mini-newsteil -->
<div id="Mini-news">
</div>
<!-- mini-newsteil -->


<!-- side1teil -->
<div id="Side1">
</div>
<!-- side1teil -->


<!-- mainteil -->
<div id="Main">
</div>
<!-- mainteil -->


<!-- side2teil -->
<div id="Side2">
</div>
<!-- side2teil -->


<!-- footerteil -->
<div id="Footer">
</div>
<!-- footerteil -->




</div>
<!-- Wrapteil -->
</body>
</html>

Alles anzeigen

Code

@charset "utf-8";
/* CSS Document */


#Wrap {
    background:#420;
}


#Top {
    width:100%;
    height:250px;    
    border: 4px solid #888;
    background:#f00;
}


#Mini-news {
    width:100%;
    height:50px;
    border: 4px solid #888;
    background:#4cc;
}


#Side1 {
    width:25%;
    height:400px;
    border: 4px solid #888;
    background:#808;
    float:left;
}


#Main {
    width:50%;
    height:400px;
    border: 4px solid #888;
    background:#fff;
    float:left;
}


#Side2 {
    width:25%;
    height:400px;
    border: 4px solid #888;
    background:#c00;
    float:right;
}


#Footer {
    width:100%;
    height:100px;
    border: 4px solid #888;
    background:#f80;
    float:none;/* postion fixirt;
    position:fixed;
    bottom:0px; */
}

Alles anzeigen

könntet ihr mir bitte einen Lösungsvorschlag sagen
Danke im Voraus & Grüße vonn John_Thym

Bleistift

Ich sehe in deiner CSS überhaupt keine Positionsangaben :s
Ein Link wäre vielleicht ganz gut ..

CSS für 2 nebenstehende Elemente:

Code

#main {
margin-left: auto;
margin-right:auto;
margin-top: 100px;
width: 1000px;
float: center;
}


#element1 {
margin-left: 0px;
width: 500px;
height: 200px;
float: left;
margin-top: 0px;
}


#element2 {
margin-right: 0px;
width: 500px;
height: 200px;
margin-top: 0px;
float: right;
}

Alles anzeigen

Wenn sich ein Element unter das andere Stellt überprüfe deine HTML-Datei. Die Elemente müssen auch dort so platziert werden, dass sie die richtigen Positionierungen erhalten ..
Alternativ mit top:-200px; arbeiten (zieht das element 200px hoch)

djheke

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#Wrap {
    background:#a33;
}


#Top {
    width:100%;
    height:250px;    

    background:#f00;
}


#Mini-news {
    width:100%;
    height:50px;

    background:#4cc;
}


#Side1 {
    width:25%;
    height:400px;

    background:#808;
    float:left;
}


#Main {
    width:50%;
    height:400px;

    background:#ff0;
    float:left;
}


#Side2 {
    width:25%;
    height:400px;

    background:#c00;
    float:right;
}


#Footer {
    width:100%;
    height:100px;

    background:#f80;
 clear:both;

}


.rahmen {
 border:4px solid #aaa;
}
</style>
</head>


<body>
<!-- Wrapteil -->
<div id="Wrap">


<!-- Topteil -->
<div id="Top">top
</div>
<!-- Topteil -->


<!-- mini-newsteil -->
<div id="Mini-news">mini
</div>
<!-- mini-newsteil -->

Alles anzeigen

Lass einfach alle Border weg. Wen du unbedingt Border willst, dann definiere noch innere Divs.

Tags