divs positionieren

[fellfresse]

hallo,
hier gleich mal der Link, damit man sieht was ich für ein problem habe.
http://fellfresse.fe.ohost.de/impressum_div_template

ganz unten befindet sich ein rotes div. dort soll später der seiteninhalt rein. demzufolge muss diese box noch oben, direkt nach oben unter die rot-blauen divs unter home.

das problem warum ich nich drauf komm, is der abschliessende div am ende, der über 100% seitenbreite geht. das inhalt div muss nicht über das letzte div gehen. ich bekomm das inhalt div nicht nach oben, ohne die formatierung der oberen divs zu zerschiessen.

was unter firefox helfen würde, wär ja nen position: absolute; und dann mit top: und left: die position schieben, aber eider is das keine lösung für den IE?!?!?!

hier noch nen bissel code:
html des bereiches mit den bunten divs und dem inhalt div:

<!-- Textbereich mit vertikaler Leiste begin -->
<div class= "text_rechts_links_spacer"></div>		
<div class= "dummy_vertikaler_spacer"></div>		
<div class= "dummy_vertikale_leiste"></div>		
<div class= "dummy_vertikaler_spacer"></div>		
<div class= "dummy_vertikale_leiste"></div>
<div class= "dummy_vertikaler_spacer"></div>		
<div class= "dummy_vertikale_leiste"></div>
<div class= "dummy_vertikaler_spacer"></div>		
<div class= "dummy_vertikale_leiste"></div>
<div class= "dummy_vertikaler_spacer"></div>		
<div class= "dummy_vertikale_leiste"></div>
<div class= "dummy_vertikaler_spacer"></div>		
<div class= "dummy_vertikale_leiste"></div>			
<div class= "vertikaler_spacer"></div>		
<div class= "vertikale_leiste"></div>		
		
<!-- Inhalt begin -->	
<div class= "inhalt">###INHALT###</div>				
<!-- Inhalt end -->
<!-- Textbereich mit vertikaler Leiste end -->

css der divs:

div.text_rechts_links_spacer	
{
	float: left;
	padding: 0;
	margin: 0;
	width: 3%;
	height: 2px;
	background: #c1c0bf;
}
div.vertikaler_spacer
{
	float: left;
	padding: 0;
	margin: 0;
	width: 4px;
}	
div.vertikale_leiste
{
	float: left;		
	padding: 0;
	margin: 0;
	width: 13%;
}		
/* Textbereich mit vertikaler Leiste end */
/* Text begin */
div.inhalt
{
	float: left;
	margin: 0;
	padding: 30px 5px 5px 50px;
	background: red;
	width: 30px;
	height: 30px;
}	
/* Text end */ 
div.vertikaler_spacer
{
	height: 100%;		
	background-image: url(../images/gelb.gif);
	background-repeat: repeat;
}	
	
div.vertikale_leiste
{
	height: 100%;		
	background-image: url(../images/grau.gif);
	background-repeat: repeat;
}
	
div.dummy_vertikaler_spacer
{
	float: left;
	padding: 0;
	margin: 0;
	width: 4px;
	height: 2px;
        background: red;	
}	
	
div.dummy_vertikale_leiste
{
	float: left;		
	padding: 0;
	margin: 0;
	width: 13%;
	height: 2px;
        background: blue;	
}

Mod-Edit: Code-Tags in HTML-Tags geändert - Bitte bei HTML-Code immer benutzen (Artemis)

 

[hobbyuser]

Sorry fellfresse

aber wenn das HTML-Layout schon "falsch" ist, kann das "richtige" hinbiegen mit CSS manchmal unmöglich sein. Vielleicht solltest du dein Layout nochmals überdenken und dann entsprechend ändern. :roll:

Mein Vorschlag:
Div = Banner
Div = Menu
Div = Bildleiste
Div = Rechte Seite ( float:right; )
Div = Inhalt
Div = Footer ( clear:right; )

Damit sollten die 6 Bereiche eigentlich zu formatieren sein. Im Bedarfsfall lässt sich noch ein Container um alles machen.

Gruß
Hobbyuser

 

[fellfresse]

und wie bekomm ich dann hin, das der farbige (graue) balken (der ja denn am rechten rand des inhalt-divs ist), immer genau unter dem linkkästchen der menu und bildleiste steht?
dieser balken soll auf jeder seite eine andere position haben. da ich eine dynamische größenanpassung verwende is das grade mein problem.

ich weiss das mein code ziemlich wurst aussieht, aber so sieht es schonmal so aus wie ich es mir vorstell.