div verschiebt sich, sobald text eingefügt wird

servus,
ich habe problem,
das rechte div kästchen mit dem Hintergrundbild mit dem Mädchen in der wiese verschiebt sich und ich bin seit gestern Abend am suchen und ich finde leider nichts passendes was mir helfen könnte.
Es gibt bestimmt was, nur ich weiß einfach nicht mehr nach was ich suchen sollte :expressionless:

Hier ist das Layout mit eingefügten text.
Home

Das ganze ist schon für Joomla hergerichtet, aber ich denke das es keinen unterschied macht ob .php oder .html, da ich das ganze offline geschrieben hab.

die index.html

[CODE]

Unbenanntes Dokument
            <div id="uebern_menue">
            <div id="menue">
            <div id="fewo">
            <div id="header_unten1">
            <div id="content_links">
            <div id="footer">
            <div id="footer_unten">
            </div>
            <div id="footer_email">
            
            </div>
            </div>
            <div id="content_main">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            <div id="content_rechts1">
            <div id="content_rechts2">
            <div id="content_rechts3">
            </div>
            </div>
            </div>
            </div>
            </div>
            <div id="header_unten2">
            <div id="header_unten3">
            <div id="header_unten4">
            
            </div>
            </div>
            </div>
            </div>


            <div id="header">
            
             </div>
            </div>
            </div>
                 
           
            <div id="rechts">
            
            </div>
            </div>
        </div>
    </div>

[/CODE]

template.css

@charset "UTF-8";




/************************************************************
******************** HAUPTAUFTEILUNG ***********************
************************************************************/


#wrapper  {
    position: absolute;
    margin:0 auto;
    margin-top:20px;
    width:1362px;
    }
    
    
#links  {
position: absolute;
    width:218px;
    height:1363px;
    background-image:url(../images/links.gif);
    background-repeat: no-repeat;
    }
    
    
#content  {
position: absolute;
    margin-left:218px;
    width:1002px;
    height:1363px;
    z-index:1;
    }
    
#content2  {
    position: absolute;
    width:1002px;
    height:1363px;
    z-index:2;
    }
    
#rechts  {
position: absolute;
    margin:0 auto;
    margin-left:1002px;
    width:142px;;
    height:1363px;
    background-image:url(../images/rechts.gif);
    background-repeat:no-repeat;
    z-index:3;
    }
    
    
/************************************************************
******************** Menü & Header ***********************
************************************************************/


#uebern_menue {
    width:1002px;
    height:31px;
    background-image:url(../images/uebern_menue.gif);
    background-repeat:no-repeat;
    z-index:4;


    }
    
#menue {
    position:absolute;
    margin-top:31px;
    width:1002px;
    height:81px;
    background-image:url(../images/menue.gif);
    background-repeat:no-repeat;
    z-index:5;
    }
    


#fewo {
    position:absolute;
    margin-top:82px;
    width:253px;
    height:476px;
    background-image:url(../images/fewo.gif);
    background-repeat:no-repeat;
    z-index:6;
    }
    
    
#header {
    position:absolute;
    margin-left:253px;
    width:749px;
    height:476px;
    background-image:url(../images/header.gif);
    background-repeat:no-repeat;
    z-index:7;
    }
    
/************************************************************
******************** Leiste unterm Header *******************
************************************************************/




#header_unten1 {
    position:absolute;
    margin-top:476px;
    width:254px;
    height:130px;
    background-image:url(../images/header_unten1.gif);
    background-repeat:no-repeat;
    z-index:8;
    }
    
#header_unten2 {
    position:absolute;
    margin-left:254px;
    width:259px;
    height:130px;
    background-image:url(../images/header_unten2.gif);
    background-repeat:no-repeat;
    z-index:9;
    }
    
#header_unten3 {
    position:absolute;
    margin-left:259px;
    width:240px;
    height:130px;
    background-image:url(../images/header_unten3.gif);
    background-repeat:no-repeat;
    z-index:10;
    }
    
#header_unten4 {
    position:absolute;
    margin-left:240px;
    width:249px;
    height:130px;
    background-image:url(../images/header_unten4.gif);
    background-repeat:no-repeat;
    z-index:11;
    }
    
    
/************************************************************
******************** MainContent  ***************************
************************************************************/




#content_links {
    position:absolute;
    margin-top:130px;
    width:253px;
    height:545px;
    background-image:url(../images/content_links.gif);
    background-repeat:no-repeat;
    z-index:12;
    }
    
#content_main{
    position:absolute;
    margin-left:253px;
    width:500px;
    height:545px;
    background-image:url(../images/main.gif);
    background-repeat:no-repeat;
    white-space:pre-line;
     z-index:30;
    }


#content_rechts1{
    position:absolute;
    margin-left:500px;
    width:249px;
    height:184px;
    background-image:url(../images/rechts1.gif);
    background-repeat:no-repeat;
    z-index:14;
    }    
    
#content_rechts2{
    position:absolute;
    margin-top:184px;
    width:249px;
    height:204px;
    background-image:url(../images/rechts2.gif);
    background-repeat:no-repeat;
    z-index:15;
    }
    
#content_rechts3{
    position:absolute;
    margin-top:204px;
    width:249px;
    height:156px;
    background-image:url(../images/rechts3-16.gif);
    background-repeat:no-repeat;
    z-index:16;
    }




/************************************************************
******************** FOOTER  ***************************
************************************************************/


#footer{
    position: absolute;
    margin-top: 545px;
    width: 753px;
    height: 75px;
    background-image:url(../images/footer.gif);
    background-repeat: no-repeat;
    z-index: 17;
}




#footer_email{
    position: absolute;
    margin-left: 753px;
    width: 249px;
    height: 48px;
    background-image:url(../images/email.gif);
    background-repeat: no-repeat;
    z-index: 19;
}


#footer_unten{
    position: absolute;
    margin-top: 75px;
    width: 1002px;
    height: 25px;
    background-image:url(../images/footer_unten.gif);
    background-repeat: no-repeat;
    z-index: 20;
}

Ich hoffe es kann mir jemand weiterhelfen.

Vielen dank schon mal,

Gruß Wolfgang

Hi Wolfgang!
Folgendes müsste gehen:
Wenn du #content_main 748px breit machst, dann definierst du noch

.newsflash {
float: left;

padding: 0 10px;

width: 480px;

}

die absolute Positionierung und das margin-left für #content_rechts1 kannst du dann rausnehmen, wenn du float:left drinnelässt …

Bodil