✔ Div wird nicht größer

Status
Nicht offen für weitere Antworten.
M

matzseesi

Erfahrenes Mitglied
Hi Leute,

Ich habe wieder mal ein Problem bei der Positionierung von ein paar divs.

folgender Code:

HTML: 
	<head>
    <style type="text/css">
      <!--
        body { margin:0px; padding:0px; }
        .root { position:relative; width:988px; border:0px solid #000000; margin:0px auto; padding:0px; text-align:left; 
                background-color:#ffffff; color:#000000; margin-top:0px; } 
        .head { height:120px; background-color:#ff0000; }
        .content { width:100%; min-height:655px; margin:0px; background-color:#000000; }
        .ausgabe { min-height:700px; position:absolute; float:left; padding-left:1px; width:796px; min-width:796px; background-color:#00ff00; }
        .info { margin-left:1px; width:189px; left:797px; position:absolute; float:left; background-color:#0000ff; }
        .footer { height:20px; background-color:#000f00; }
      -->
    </style>    
	</head>
	<body>
	  <div class="root">
	    <div class="head">
	      testhead
	    </div>
      <div class="content">
        <div class="ausgabe">
          test1
        </div>
        <div class="info">
          test2
        </div>
      </div>
      <div class="fotter">
        test3
      </div>
	  </div>
	</body>

das schwarze div (also das div mit der classe content) soll nun mit dem div mit der classe ausgabe mitwachsen falls es größer wird. Jedoch tut es das nicht. was kann man da machen! Ich vermute dass es mit der absoluten Positionierung zu tun hat...

Was ich auch nicht verstehe ist warum das ausgabe div sich (trotz position:absolute) am content div (welches nicht absolut positioniert wurde) orientiert und nicht ganz nach oben wandert (zum position:relative div). (Im Prinzip passt es so wie es angezeigt wird, nur verstehen tu ich es nicht.

Ich hoffe ihr könnt mir helfen!

Gruß

Matz
 
Hi,

kommentier mal die absolute Positionierung aus:

Code: 
body { margin:0px; padding:0px; }
        .root { position:relative; width:988px; border:0px solid #000000; margin:0px auto; padding:0px; text-align:left;
                background-color:#ffffff; color:#000000; margin-top:0px; }
        .head { height:120px; background-color:#ff0000; }
        .content { width:100%; min-height:655px; margin:0px; background-color:#000000; }
        .ausgabe { min-height:700px; /*position:absolute;*/ float:left; padding-left:1px; width:796px; min-width:796px; background-color:#00ff00; }
        .info { margin-left:1px; width:189px; /*left:797px;*/ /*position:absolute;*/ float:left; background-color:#0000ff; }
        .footer { height:20px; background-color:#000f00; }
erweitere das Stylesheet mit der folgenden Regel:

Code: 
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
ruf die Klasse clearfix zusätzlich im DIV content auf:

Code: 
<div class="content clearfix">
und korrigiere zum Schluß im HTML-Code den Schreibfehler im class-Attribut des DIVs footer.
 
Hi,

Danke für die rasche antwort!
Hast recht das clearfix hatte ich vergessen! hab diesen Code nur hier fürs Forum schnell getippt damit es etwas anschaulicher wird und dabei diese Details vergessen.

dh. falls ich absolut positioniere, funktioniert es nicht?

Gruß

M.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück