✔ [CSS] Div bottom anordnen

[BadKiss]

Halli hallo beisammen,

ich habe ein kleines (sehr nervendes) Problem.
Ich möchte gerne ein Div bottom anordnen, allerdings kann ich das nicht mit absolute machen, da ein Text um das Div floaten soll.
Hier mal ein Screen, wie es im Moment aussieht:
Screen

Im Moment ist das rechte Div noch top positioniert und relative, ich möchte es allerdings unten am footer etwa haben, allerdings funktioniert das ohne absolute nicht bzw es funktioniert soweit, wenn man top: 200px; macht schon, allerdings floatet der Text dann nicht um das Div, sondern um die vorherige Stelle (da wo das Div im Moment angeordnet ist).

Hier noch der HTML Source:

<div id="content">
    <div id="content_text">
      <div id="contentleft">
        <div id="contentleft_top"></div>
        <div id="navigation_l">
            Linkmenu links<br />
        </div>
        <div id="contentleft_bottom"></div>
      </div>
      <div id="contentright">
        <div id="contentright_top"></div>
        <div id="navigation_r">
            Linkmenu rechts<br />
        </div>
        <div id="contentright_bottom"></div>
      </div>
        Text, der im Content stehen soll, 
        welcher um die 2 Divs floaten soll!
      </div>
    </div>
<div id="footer">
    <div id="footer_text">
      Footerteil
    </div>
  </div>

und CSS Source:

#content{
position: relative;
top: 0px;
left:0px;
width:804px;
height:auto;
float:left;
margin: auto;
background-image:url(image/hg.jpg);
background-repeat:repeat-y;
z-index:2;
}
#content_text{
position: relative;
top: 0px;
left:78px;
width:646px;
margin-left:-78px;
height:auto;
float:left;
margin: auto;
}
#contentleft {
position:relative;
float:left;
top:0px;
left:-78px;
margin-right:-78px;
width:168px;
height:auto;
background-image:url(image/left.jpg);
background-repeat:repeat-y;
}
#contentleft_top {
position:relative;
float:left;
top:0px;
left:0px;
width:168px;
height:52px;
background-image:url(image/left_top.jpg);
background-repeat:no-repeat;
}
#contentleft_bottom {
position:relative;
float:left;
bottom:20px;
left:0px;
width:168px;
height:58px;
margin-bottom:-20px;
background-image:url(image/left_bottom.jpg);
background-repeat:no-repeat;
}
#contentright {
position:relative;
float:right;
right:-75px;
margin-left:-75px;
width:154px;
height:auto;
background-image:url(image/right.jpg);
background-repeat:repeat-y;
}
#contentright_top {
position:relative;
float:left;
top:0px;
left:0px;
width:154px;
height:52px;
background-image:url(image/right_top.jpg);
background-repeat:no-repeat;
}
#contentright_bottom {
position:relative;
float:left;
bottom:20px;
left:0px;
width:154px;
height:28px;
margin-bottom:-20px;
background-image:url(image/right_bottom.jpg);
background-repeat:no-repeat;
}
#navigation_l {
position: relative;
float:left;
top: -20px;
left: 25px;
width: 105px;
height:auto;
text-align:center;
}
#navigation_r {
position: relative;
float:left;
top: -20px;
left: 25px;
width: 105px;
height:auto;
color:#E7E4D6;
text-align:center;
}

Ich hoffe man versteht mein Problemchen und mir kann jmd helfen, wäre unglaublich dankbar dafür, da ich schon Ewigkeiten an dem Problem hänge

Lg,
Bad

 

[Maik]

Hi,

wie sieht denn der "Soll-Zustand" des Layouts konkret aus?

mfg Maik

 

[BadKiss]

Soll-Zustand

So sollte es ganz am Schluss aussehen (schnell im Photoshop den Text eingefügt).

Außerdem sollen die 2 Divs in der Höhe variierbar sein (also je nach Text innen drin angepasst).

 

[Maik]

Und wie soll sich der rechte Block verhalten, wenn der Seiteninhalt länger, und der Footer so nach unten verschoben wird?

mfg Maik

 

[BadKiss]

Der rechte Block soll ungefähr 200 Pixel Abstand zum Header haben und je nach Text im Div des rechten Blockes nach unten größer werden. Der Seiteninhalt soll dann um das Div rumfließen.

Ich kann auch versuchen es mit Bildern zu erklären, wenn es sich zu komplex anhört.

 

[Maik]

Hi,

weitere "Vorschau-Bilder" sind nicht mehr nötig, da ich nun weiß, worauf du hinaus willst

Steht die Seite derzeit online zur Verfügung, um sich den vollständigen Quellcode und die verwendeten Grafiken herunterzuladen?

Ansonsten lad doch bitte alle benötigten Dateien in einem ZIP-Archiv hier hoch.

Dann kann ich mal über's Wochenende schauen, ob sich da was machen lässt

mfg Maik

 

[BadKiss]

Seite
Dort ist derzeit alles hochgeladen, wenn du's aber doch als zip-Archiv brauchst, dann sag Bescheid
Schonmal ein riesen Dankeschön.

 

[Maik]

Nicht nötig, ich bin doch im Besitz der FF-Erweiterung "Down Them All!", und hab schon alles heruntergeladen

mfg Maik

 

[Maik]

Hi,

ich hab mich heute Nachmittag eine geschlagene Stunde mit dem Modell auseinandergesetzt, um auf ein akzeptables Ergebnis zu kommen, aber das haut mit dem Umfliessen der rechten Box einfach nicht hin

Gerade eben ist mir dann aber wieder eine interessante Methode eingefallen, mit der Stu Nicholls einen Text um eine "gezackte" Grafik fliessen lässt:

• Wrapping text around images
• Tracking your images

Vielleicht kannst du ja damit etwas anfangen.

mfg Maik

 

[BadKiss]

Danke trotzdem fürs Versuchen und den Tipp, ich werds mal damit versuchen, sonst werd ich das Layout einfach etwas umstrukturieren.
Danke nochmals