Thomas: Probleme mit float

SELF-Forum

Probleme mit float

Thomas
– Informationen zu den Bewertungsregeln

Hallo Leute,

Habe folgendes Problem, mit folgendem CSS:

/* CSS Document */

html, body { margin: 0; padding: 0; z-index: 0; text-align: center; font-family: arial, helvetica, sans-serif; color: #555555; font-size: 12px; }
body { }

form { margin:0; padding:0; }

#main { width:850px; position:relative; background: #FFF; margin:0 auto; padding:0 0 20px 0; text-align:left; z-index: 0; height: auto; }

.go_home { display:block; float:left; background-image:url(../images/logo.gif); background-repeat:no-repeat; position:relative; width:140px; height:55px; }
.go_home:hover { background-position:0 -55px; }

.mb5 { margin-bottom:5px; }
.mb10 { margin-bottom:10px; }

.float_l { float:left; }
.float_r { float:right; }

#header { margin:0; padding:0; height:auto; clear:both; width:100%; background-image:url(../images/top_right.gif); background-repeat:repeat-x; background-color:#F7F7F7; border-bottom:2px solid #EEE; }

#header #left { width:140px; height:auto; position:relative; display:block; font-size:11px; z-index:999; float:left; }
#header #left label { color:#333333; font-size:11px; font-weight:bold; }
#header #left input[type=text], #left input[type=password] { width:113px; font-size:11px; }
#header #left .content { width:120px; height:auto; clear:both; padding:10px; }

#header #middle { margin:0; padding:0; width:670px; display:block; height:30px; position:relative; float:left; }

#header #right { margin:0; padding:0; width:40px; height:auto; display:block; position:relative; float:left; }

.blue_btn { height:18px; font-size:11px; font-weight:bold; color:#FFF; background-color:#6d84b4; border:1px solid #3b5998; }

/* 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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="css/base.css" rel="stylesheet" media="screen" />
</head>

<body>

<div id="main">

<div id="header">
      <div id="left">
       <a href="index.php" class="go_home"></a>
    <div class="content">
           <form>
               <label for="email">Email:</label>
            <input type="text" name="email" id="email" class="mb5" />

<label for="pssword">Passwort:</label>
            <input type="password" name="password" id="password" class="mb10" />

<input type="submit" value="Log In" class="blue_btn" />
        </form>
       </div>
   </div>

<div id="middle">
       fs
   </div>

<div id="right">
       f
   </div>
  </div>

</div>

</body>
</html>

wie man beim header sieht hat der parameter height:auto und ein hintergrundbild und hintergrundfarbe.

wenn ich nun die div's "left,middle,right" auf float:left setze wird der hintergrund des headers nicht angezeigt.

Wenn ich float:left weglass, dann passt alles bis auf die formatierung, aber der hintergrund ist da.

Woran liegt das?, ich denk mal am float.

Wie kann ich den fehler umgehen?

danke mfg tom

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Probleme mit float

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hello out there!

    wenn ich nun die div's "left,middle,right" auf float:left setze

    Dann nimmst du diese Elemente aus dem normalen Fluss. Die Höhe des Elements 'header' richtet sich, da sie den Wert 'auto' hat, nach der Höhe seines noch im Fluss befindlichen Inhalts. Solchen gibt es bei dir nicht, die Höhe ist also 0, folglich

    wird der hintergrund des headers nicht angezeigt.

    See ya up the road,
    Gunnar

    --
    „Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln