Problem mit Element-Überlappung

[xXBlackKnightXx]

Hallo,

ich habe mir vor ca. einer Woche die 2 Lern-DVD's zum Thema Webdesign gekauft und nun meine erste Homepage designed.

Soweit lief alles ganz gut, ich habe allerdings ein Problem:

Ich will in meine "Footer-Leiste" auf der linken Seite das Copyright stehen haben und auf der rechten Seite möchte ich einen Link zum Impressum anzeigen lassen.

Wenn ich das nun folgendermaßen mache:

<div id="main">
            <div id="content">
                <div class="box text-title">
                <span>*Text*</span>
                </div>
                
                <div class="box text-content">
                    <div class="content-wrapper">
                        <h3>*Text*</h3><br />
                       *Text*
                    </div>
                </div>
                
                <div class="box text-end">
                </div>
            </div>
        </div>
        
        <div id="footer">
                <span>Copyright 2011 © <a href="#">*Firma*</a> 2011. All rights reserved.</span>
        </div>
        
        <div id="footer-right">
            <span>IMPRESSUM</span>
        </div>

Wird der Text immer unter der Footer-Leiste angezeigt und nicht darin (siehe Bild)

Meine Frage ist nun:

Wie bekomme ich es hin, dass das Impressum in der Footer-Leiste, aber am rechten Rand angezeigt wird?


Hier noch das Bild:




PS: Ich bekomme das Impressum zwar auf die rechte Seite, doch es will nicht in die Footer-Leiste, sondern hängt immer am unteren Rand...

 

[cebito]

AW: Problem mit Element-Überlappung

Warum packst du beide Links nicht gleich in den Footer? Divs sind Blockelemente, fangen also automatisch ne neue Zeile an, es sei denn, du sagst ihnen was anderes (float). Ohne zugehöriges css lässt sich hier sowieso nicht sagen wo dein Fehler ist.

 

[xXBlackKnightXx]

AW: Problem mit Element-Überlappung

Oh ja die css hab ich vergessen...:

@charset "utf-8";
/* CSS Document */

*{padding:0;margin:0;outline:none;}
html,body{width:100%;height:100%;}

.header{background:url("images/header.png") no-repeat top center;margin:auto;width:1000px;height:100px;}
.navi{background:url("images/navi.png") no-repeat top center;width:980px;height:49px;margin:auto;}
.navi ul{font:15px Verdana;list-style:none;padding-left:30px;margin-left:20px;padding-top:15px;}
.navi li{padding:0 15px;float:center;display:inline;}
.navi li a{color:#656565;text-decoration:none;}
.navi li a:hover{opacity:0.3;}

.main{background:url("images/content.png") no-repeat;width:980px;height:708px;margin:0 auto;position:static;padding-top:20px;background-repeat:repeat-y;}
.content{margin:auto;width:902px;}
.box{background:url("images/content_box.png") repeat scroll 0 0 transparent;width:902px;}
.text-title{font:15px Verdana;height:50px;margin:10px auto 0;}
.text-title span{color:#FFF;text-align:center;line-height:2.5;padding-left:20px;font-weight:bold;}
.content-wrapper{color:#656565;padding-left:10px;font-size:12px;}
.text-end{background-position:left bottom;height:12px;}

/*Homepage-Box-1*/.text-content-home1{font:15px Verdana;width:899px;background-position:right;height:60px;}
/*Homepage-Box-2*/.text-content-home2{font:15px Verdana;width:899px;background-position:right;height:100px;}
/*Impressum*/.text-content-imp{font:15px Verdana;width:899px;background-position:right;height:330px;}


#footer{background:url("images/footer.png") no-repeat top center;width:980px;height:42px;margin:auto;}
#footer span{color:#656565;font:10px Verdana;line-height:4.0;padding:0px 50px;}
#footer span a{color:#656565;text-decoration:none;}
#footer-right{color:#656565;font:10px Verdana;line-height:4.0;padding:0px 50px;}

Wenn ich beide Links in den Footer packe, hängt das Impressum trotzdem noch unter der Footer-Bar.

Ich weiß echt nicht, was man da noch machen kann, zudem ich eh erst seit ca. 3 Tagen HTML/CSS lerne

Ich hoffe mir kann jemand dabei helfen

 

[xXBlackKnightXx]

AW: Problem mit Element-Überlappung

Kann mir denn keiner helfen?

 

[cebito]

AW: Problem mit Element-Überlappung

Kann mir denn keiner helfen?

Das Stichwort hast du doch schon bekommen:

Divs sind Blockelemente, fangen also automatisch ne neue Zeile an, es sei denn, du sagst ihnen was anderes (float).

http://www.css4you.de/float.html

 

[xXBlackKnightXx]

AW: Problem mit Element-Überlappung

Das bringt mir aber leider nicht viel, denn wenn ich dem Element Footer einen float:left gebe wird er einfach am linken Bildschirmrand positioniert und das Impressum ist rechts daneben...
Mit float:right ist es genau dasselbe, mit dem Unterschied, dass das Impressum links vom Footer sitzt.


Edit: Hat sich erledigt, mit margin bekommt man es dann hin, dass das Impressum in die Footer-Leiste rutscht.

Vielen Dank für den Tipp

 

[cebito]

AW: Problem mit Element-Überlappung

Du musst dein "Impressum" auch IN den footer packen, und dann floaten.