• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

float:left zerschießt meine Container

R

rampy

Neues Mitglied
Hallo,

ich bin gerade dabei eine Tabelle (aus nem JPEG) anhand von DIV Containern nachzubauen. Ist auch alles ganz gut gelungen, nur wenn ich jetzt versuche Text um meine Tabelle zu schreiben, dann gehen meine DIVs kaputt.
Es Ändert sich die Höhe von einzelnen DIVs und dann passt nichts mehr. Hat jemand ne Ahnung, wie ich das Problem lösen kann?

Hier mal mein Code:
Code: 
<!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>title</title>
<style type="text/css">
.outterrim {
	background-color: #6b9f19;
	height:172px;
	color: #FFF;
	width:350px;
	float:left;
}
.innergreen {
	background-color: #e5f7c7;
	margin:0px 3px 0px 3px;
	height:120px;
	
}
.innerrim {
	color: #6b9f19;
	border-top-color: #6b9f19;
	border-right-color: #6b9f19;
	border-bottom-color: #6b9f19;
	border-left-color: #6b9f19;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-style:solid;
//	margin:10px 50px 20px 50px;
	margin:10px auto;
	padding:5px 10px 5px 10px;
	height:25px;
	width:150px;
	clear:both;
	
}
.innerrim2 {
	color: #6b9f19;
	margin:10px auto;
	padding:5px 10px 5px 10px;
	height:25px;
	width:150px;
	font-weight:bold;
	clear:both;
	
}
.outerrimtext{
	font-weight:bold;
	font-size:18px;
	padding: 10px 0px 0px 3px;
}
.n {
	color: #e5f7c7;
}
.littlebox-green {
	color: #FFF;
	background-color: #6B9F19;
	width:30px;
	text-align:center;
	padding:3px 5px 3px 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	float:rigth;
	margin-left:10px;
	float:left;
}
.littlebox-green2 {
	color: #FFF;
	background-color: #6B9F19;
	width:30px;
	text-align:center;
	padding:3px 5px 3px 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	float:right;
	margin-left:110px;
}
.littlebox-green-white {
	color: #6B9F19;
	background-color: #FFF;
	width:30px;
	text-align:center;
	padding:3px 5px 3px 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	float:right;
	margin-left:10px;
	float:left;
	border-color:#6B9F19;
	border-style:solid;
}
.littlebox {
	float:left;
	padding-top:3px;
}
</style>
</head>

<body>
<div class="outterrim">
  <p class="outerrimtext">Bachelor</p>
<div class="innergreen"><span class="n">a</span>
  <div class="innerrim">
    <div class="littlebox">1 aus 2</div>
    <div class="littlebox-green">EM</div>
    <div class="littlebox-green">IuK</div>
  </div>
  <div class="innerrim2">
    <div class="littlebox">+</div>
    <div class="littlebox-green-white">AIM</div>
  </div>
  </div>
</div>
<p>Dieser Text macht alles kaputt</p>
</body>
</html>

Ich bin noch recht neu beim CSS und HTML kombinieren, weshalb mir da momentan nichts weiter einfällt.
Ich hoffe bei euch ist das anders!
 
Zuletzt bearbeitet:
Du hast dich mehrmals verschrieben:

Code: 
float:rigth;

heißt eigentlich

Code: 
float:right;

Und wer floatet muss auch clearen.
 
ok, ich habe den Code oben mal geändert.
Ich will ja den gesamten "outterrim" Container umfließen lassen. Also gebe ich ihm die Eingenschaft float:left , soweit richtig?
Der Text umfließt dann also meine ganzen DIVs, aber warum verschiebt er die denn? Das mit dem Clear benötige ich doch für den Text gar nicht, da er erstmal den Container umfließen soll.
Oder verstehe ich das falsch?

auch, wenn ich nach den ganzen DIVs ein div=clear mache, dann verschiebt sich auch alles aus dem DIVs bzw. kommt die Schrift im 2ten Container nach unten und dadurch verschiebt sich auch der Rest.
 
Tipp von mir für das sichere floaten:
benutze einen Clearfix

Dann kriegt immer das Elternelement dessen, was floaten soll, einen clearfix.
Beispiel:

<div class="clearfix">
<div style="float:left">
Text1
</div>
<div style="float:right">
Text2
</div>
</div>



Der Clearfix sieht folgendermaßen aus (im CSS):

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */


Gibst dem umschließenden Element halt immer die classe "clearfix"
Damit floatet man kontrolliert =)
 
Dein Ansinnen eine Tabelle mit div-Containern nachzubauen halte ich für eine ganz schlechte Idee.
So bekommst du das Tabellendenken nie aus deinem Hirn raus.
Wenn du tabellarische Daten hast nimm <table>, ansonsten vergiss das Nachbauen. ;)

@them0rtn
clearfix halte ich bei XHTML/CSS-Anfänger für nicht geeignet, da man da schon genauer wissen sollte, was man da tut.

Schau dir doch mal Little Boxes online an. ;-)

Ein Link zum Problem wäre auch nicht schlecht.
 
ich glaube, da habe ich erstmal ein wenig zu lesen. ;)
Danke euch beiden. Ich werde mir erstmal noch ein paar Seiten durchlesen und dann mal gucken, ob ich es in den Griff bekomme!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben