Problem mit Div & Float

[owned13909]

Hallo liebe tutorials.de Community,
ich habe ein kleines Problem mit meiner Html Seite, und zwar sind die 4 hellblauen Balken nicht alle nebeneinander eingereiht (siehe bild).

Bild

Hier der quelltext:

<div id="cat_container">
	<div id="cat_body">
    	<div id="cat_head"></div>
        <div id="cat_head_forum_info"></div><div id="cat_head_toprep_info"></div><div id="cat_head_toprep_info"></div><div id="cat_head_lastpost_info"></div><div id="clear"
    </div>
</div>

body{
	padding:0px;
	margin:0px;
}

#cat_container{
	position:absolute;
	width:100%;
}

#cat_body{
	position:relative;
	width:auto;
	margin-left:20px;
	margin-right:20px;
	border:1px solid #999;
	padding:1px;
}

#cat_head{
	height:32px;
	width:100%;
	background-color:#2f3b49;
}

#cat_head_forum_info{
	height:29px;
	background-color:#ced7e6;
	width:66%;
	float:left;
	border-bottom:1px solid #9a9fa5;
	border-right:1px dotted #9a9fa5;
}

#cat_head_toprep_info{
	height:29px;
	background-color:#ced7e6;
	width:7%;
	float:left;
	border-bottom:1px solid #9a9fa5;
	border-right:1px dotted #9a9fa5;
}

#cat_head_lastpost_info{
	height:29px;
	background-color:#ced7e6;
	width:20%;
	float:left;
	border-bottom:1px solid #9a9fa5;
	border-right:1px dotted #9a9fa5;
}

#clear{
	clear:both;
	width:0;
	height:0;
}

 

[Maik]

Hi,

dein Problem sind hier vielmehr die prozentualen Breitenangaben gepaart mit absoluten Rahmenstärken, die offensichtlich in der Summe mehr als 100% ergeben, was zum Umbruch des letzten DIV-Blocks führt.

Diesem <div> fehlt übrigens die schliessende >-Klammer:

<div id="clear"

mfg Maik

 

[owned13909]

Vielen dank für deine Antwort.
Das bei dem <div> die schließende Klammer fehlt, lag daran, dass ich das aus welchem Grund auch immer nicht mitkopiert habe.
Jetzt weiß ich zwar woran es liegt aber wie ich das Problem behebe weiß ich leider noch nicht

 

[Maik]

Die Rahmenangaben aus diesen Blöcken nehmen, damit hier nicht mehr das Box-Modell greift, und sie stattdessen an ein darin eingebundenes Element übergeben.

mfg Maik

 

[owned13909]

Danke!
Problem im FF gelöst...allerdings will der IE noch nicht so ganz

 

[Maik]

Welcher IE (Version)?

mfg Maik

 

[owned13909]

Dürfte der IE 7 sein...der macht nach dem 3 Block immernoch einen Umbruch.

 

[Maik]

Dann übergibst du dein HTML-Dokument offensichtlich den Browsern ohne oder mit dem falschen Doctype im "Quirksmodus", denn im standardkonformen Modus bricht bei mir keiner aus der IE-Familie (6 - 8) den letzten Block um.

mfg Maik