Thomas: Probleme mit float

Beitrag lesen

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