[CSS] 3 Column Layout, dnyamische Mitte bleibt leer ohne Text

[-=Renegade=-]

[CSS] 3 Column Layout, dynamische Mitte bleibt leer ohne Text

Hi!

Also, ich hab ein Layout mit 3 Spalten erstellt, wobei die mittlere Spalte sich automatisch an die Breite anpasst und die beiden äußeren (zwei Bilder) immer gleich groß bleiben. Das ganze funktioniert auch ganz gut, doch der Hintergrund der mittleren Box wird nur dann gefüllt, wenn dort ein Text steht. Sobald man jedoch einen fixen Wert vergibt, funktioniert das ganze System nicht mehr. Hat irgendwer eine Lösung für mich?

HTML File:

    <div class='ASCs_con'>	
	<div class='ASCs_cb_l'></div>
	<div id='ASCs_cb_m'>
		<div class='ASCs_cb_m_s'>
                  Text
		</div>
	<div class='ASCs_cb_r'></div></div></div>

CSS File:

.ASCs_con {
  margin-top:30px;
  min-width:892px;
}

.ASCs_cb_l {
  background-image:url(../images/ASCs_CB_L.png);
  background-repeat:no-repeat;
  position: absolute;
  margin:0px;
  border:0;
  float:left;
  left:0;
  width:314px;
  height:355px;
}

#ASCs_cb_m {
  background-image:url(../images/ASCs_CB_M.png);
  background-repeat:repeat-x;
  margin: 0 288px 0 314px;
  padding:10px 0;
  height:355px;
  border:0;
  float:left;
}

.ASCs_cb_m_s {
  text-align:justify;
  font-family:'Times New Roman', sans-serif;
  font-style:normal;
  font-size:1em;
  margin:0;
  padding:0; padding-right:16px;
  max-height:330px;
  overflow:auto;
  float:left;
}

.ASCs_cb_r {
  background-image:url(../images/ASCs_CB_R.png);
  background-repeat:no-repeat;
  position: absolute;
  margin:0px; margin-top:-10px; margin-left:-30px;
  border:0;
  float:left;
  right:0;
  width:288px;
  height:355px;
}

Vielen Dank im Voraus

so long
Renegade

 

[Crizzo]

AW: [CSS] 3 Column Layout, dynamische Mitte bleibt leer ohne Text

Nimm den beiden "Ränden" "position:absolute" ---> "static".

Wieso lässt du die Mitte "floaten"? Nimm das auch mal raus.


Und nenne die mal sinnvoll um...das ist ja grausam.

 

[-=Renegade=-]

Die Position:absolute haben schon ihre Berechtigung, ohne gehts nicht.

Float war tatsächlich überflüssig und somit auch der Fehler, jetzt gehts, danke.

Die Bennenung mag für einen Außenstehenden vllt schwer nachzuvollziehen sein, aber intern lässt es sich deutlich angenehmer mit Abkürzungen arbeiten, wenn man halt weiß, was sie bedeuten


so long
Renegade

 

[Crizzo]

Die Position:absolute haben schon ihre Berechtigung, ohne gehts nicht.

Erklär mal, was die dort machen sollen.

 

[-=Renegade=-]

Das Design baut darauf auf, dass die rechte und linke Spalte immer gleich bleiben, während die mittlere den restlichen Platz einnimmt, der im Browserfenster übrig bleibt.

Nimmt man die position:absolute raus bzw ersetzt man sie durch static, verrutscht das ganze Design.

Insofern bin ich jetzt damit zufrieden, weil alles läuft so wie ich es mir vorstelle


so long
Renegade

 

[Crizzo]

Naja, ich würde die rechten/linken Spalten per float ausrichten, eine Breite definieren und dem mittleren Teil nur noch die Abstände nach Links/Rechts geben und schon passt er sich dynamisch an.