Wie kann ich einen rechten festen Content per CSS erstellen?

[linux87]

Hallo Community,

wie ihr der Überschrift entnehmen könnt, möchte ich gern einen festen rechtsbündigen Inhalt erstellen, der bei jeder Unterseite bestehen bleiben soll/bzw. neu geladen (da ich keine Frames verwenden möchte) werden soll.

In den rechten Inhalt möchte ich Boxen einfügen in denen z.. eine Kontaktadresse, ein Newsletteranmeldeformular etc. stehen.

Anbei füge ich mal zwei Skizzen hinzu, damit ihr seht, wie das Layout momentan aussieht und wie es später aussehen sollte.

So schaut es momentan aus:


So soll es später aussehen:


So sieht meine CSS-Datei momentan aus:

*    {
        padding:0;
        margin:0;
}


body {
    background-repeat:repeat-x;
    background-color:#FFFFDA;
    margin:12px;
    padding:0;
    text-align:center;
}


h3 {
    font-size:16px;
    margin:0;
    padding-bottom:5px;
    padding-top:15px;
}

p {
    margin-top:5px;
    margin-right:12px;
    padding-bottom:5px;
    font-size:12px;
    line-height:1.5;
}


hr {
    margin-right:18px;
    color:#fff;

}

#container {
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    margin:0 auto;
    width:975px;
    padding:0px;
    height:auto;
    background-color:#FFF;
    text-align:left;
        border-width:1px;
        border-style:solid;
        border-color:#000;

}


#banner {
        width:975px; 
    height:221px;
    background-image:url(bilder/bg1c.jpg);
    float:left;
}


#content {
    background:url(bilder/bg1.gif) repeat-y;
    height:1%;
    }

#leftColumn {
    float:left;
}

#nav {
    margin-top:70px;
    padding:0px;
    list-style:none;
}

#nav a {
    display:block;
    font-size:12px;
    color:#FFF;
    text-decoration:none;
    padding:10px;
    width:166px;
    height:14px;
}

#nav a:hover {
    background-image:url(bilder/navihover.jpg);
        color: #FFF;

}

#leftColumnBottom {
    width:130px;
    padding:50px 10px 10px;
    color:#EAEAEA;
}

#rightColumn {
    float:left;
        width:755px;
    padding-left:20px;
    color:#000000;


}   
    
#clear {
    clear:both;
}


#copyright {
    font:10px Arial,Helvetica,sans-serif;
    color:#000
}

#copyright a {
    text-decoration:none;
    color:#000;
}


input.bgImage {
width: 300px;
height: 17px;
background: #ebebeb no-repeat;
color: #000;
border-width:1px;
border-style:solid;
border-color:#b2b2b2;
}

input.bgImage2 {
width: 300px;
height: 120px;
background: #ebebeb no-repeat;
color: #000;
border-width:1px;
border-style:solid;
border-color:#b2b2b2;
}

#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;background: url(images/prevlabel.gif) left 10% no-repeat;}
#nextLink { right: 0; float: right;background: url(images/nextlabel.gif) right 10% no-repeat;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 10% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 10% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }

#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }    
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }            
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}         

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

Ich weiß, dass dieses Problem vermutlich sehr kompliziert ist, aber ich habe wirklich schon alles mögliche getan, um mein Problem zu beheben. Leider weiß ich jedoch nicht weiter.

Viele Grüße,
linux87

 

[prm]

Link wäre hilfreicher, damit man auch den HTML-Code hat.

 

[ohrflieger]

Mach doch einfach innerhalb des Contents einen Container, der nach rechts gefloatet wird:

#rechts {
 float: right;
 width: 250px;
}

[...]

<div id="content">

   <div id="rechts">
      Hier die rechte Box...
   </div>

Hier der normale Content...

</div>

[...]

 

[linux87]

@prm: Du hast eine PN.

 

[tarik02]

@prm: Du hast eine PN.

Warum stellste den nicht komplett hier rein? Damit wir ALLE helfen können?


T02

 

[linux87]

Mach doch einfach innerhalb des Contents einen Container, der nach rechts gefloatet wird:

#rechts {
 float: right;
 width: 250px;
}

[...]

<div id="content">

   <div id="rechts">
      Hier die rechte Box...
   </div>

Hier der normale Content...

</div>

[...]

Vielen Dank, ohrflieger. Hat super geklappt mit:

#rechts {
float: right;
width: 250px;

&

<div id="rechts">
Hier die rechte Box...
</div>

linux87