Problem mit "float"

isharkxli

Hallo, folgender css-code bringt mich zur Verzweiflung:
Ich schaffe es irgendwie nicht den rechten Bereich auszurichten.
Er rutscht immer in die Höhe des "Main" -Bereiches.
Was mache ich falsch ?

#left {
float:left;
}

#right {
float:right;
}

#left { /*linke Seite*/
background:#ffd5ee;
border:1px solid #f09;
height:750px;
}

#right { /*rechte Seite*/
background:#fff7d5;
border:1px solid #fc0;
height:750px;
}

#logo { /*Logo*/
background-color:#d5aaff;
border:1px solid #09f;
height:100px;
width:66%;
float:left;
margin-left:3%;
}

#main { /*Hauptteil*/
background-color:#d5eeff;
border:1px solid #09f;
height:750px;
width:66%;
float:left;
margin-left:3%;
margin-top:1%;
}

Hier das HTML dazu:

<!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>
<TITLE>4 Bereiche</TITLE>
<LINK REL="stylesheet"
TYPE="text/css"
HREF="style.css" />
</HEAD>

<BODY>
<DIV ID="left">left
</div>
<div id="logo">logo
</div>
<DIV ID="main">main
</DIV>
<DIV ID="right">right
</DIV>
</BODY>
</HTML>

Peter Gedamke

Zusammenfassung von 2 Posts durch Foster:

hmmmmm,
also bei mir sieht eine ähnliche Aufstellung so aus

#head
{
text-align:center;
margin-left:10pt;

border-bottom:5pt double;
border-color:#AFAFAF;
padding:10pt;
}

#main
{
margin-left:100pt;
margin-right:20pt;
margin-top:20pt;
text-align:justify;
}

#navi1
{
position:absolute;
top:130pt;left:20pt;
width:80px;
text-align:left;
border-right:1px solid;
padding:5pt;
font-weight:bold;
font-size:11px;
}

Das "float" ist mir bei dir dabei nicht ganz nachvollziehbar

Post #2:

ändere deine Eingaben mal auf feste Positionierungen
#left { /*linke Seite*/
background:#ffd5ee;
border:1px solid #f09;
position:absolute;
left:10pt; top:50pt;
width:150px;
}

#right { /*rechte Seite*/
background:#fff7d5;
border:1px solid #fc0;
position:absolute;
left:85%; top:50pt;
width:150px;
}

#logo { /*Logo*/
background-color:#d5aaff;
border:1px solid #09f;
position:absolute;
left:300pt; top:20pt;
width:400px;;
}

#main { /*Hauptteil*/
background-color:#d5eeff;
border:1px solid #09f;
position:absolute;
top:100pt; left:20%;
width:750px;
}

Auf eine Höhenbestimmung kannst du ruhig verzichten, da sich diese ja automatisch aus den Einträgen (Text, Banner etc.) ergeben

isharkxli

Hallo, danke für die Antwort. Mit der festen Positionierung geht's natürlich auch. Ich hab's aber auch so hingekriegt. Das HTML war falsch. Die Reihenfolge der aufgerufenen Div-Bereiche war falsch.

Jetzt mitmachen!