ausrichtung von <div> mittels css - Seite 2

Seite 2 von 2 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/ausrichtung_von_ltdivgt_mittels_css_102848/page_2 - zur Vollversion wechseln!

Ezekiel schrieb am 08.01.2004 um 13:49

http://www.thenoodleincident.com/tu...sson/boxes.html

oder direkt hier: http://www.thenoodleincident.com/tu...sic2_fluid.html

verstehen tu ich das nicht ganz, aber funktionieren tuts

Spikx schrieb am 08.01.2004 um 14:04

naja, dort fehlt auch das '2 centered boxes'
abes es geht eh so wie ich's beschrieben hab im edit:

Code:

<div style="text-align:center;">
	<div style="width:600px;margin-left:auto;margin-right:auto;">
		<div style="text-align:left;width:300px;background-color:tan;float:left;">
			content
		</div>
		<div style="text-align:left;width:300px;background-color:tan;float:right;">
			content
		</div>
	</div>
</div>

Rektal schrieb am 08.01.2004 um 14:19

Bingo

Das ganze dann nicht als inline-styles sondern in eine eigene CSS deklaration und es schaut auch nicht mehr so fuerchterlich viel code aus.

Bsp

Code:

<style type="text/css">
  .ie5-center-hack {
    text-align: center;
  }
  #content {
    width: 600px;
    text-align: left;
    margin: 0 auto 0 auto;
    background-color: tan;
  }
  #leftSide {
    width: 300px;
    float: left;
  }
  #rightSide {
    width: 300px;
    float: left;
  }
   #content br {
      clear: left;
   }

HTML

Code:

<div class="ie5-center-hack">
  <div id="content">
    <div id="leftside">
    </div>
    <dif id="rightSide">
    </div>
    <br>
  </div>
</div>

Spikx schrieb am 08.01.2004 um 14:24

jo eh, wor jo jetzt nur zum ausprobieren

//was genau ist nochmal "clear:left/right"?

Rektal schrieb am 08.01.2004 um 15:13

"floats" werden aus dem "flow" eines Dokumentes genommen.

Teste einfach folgendes: gibt das clear: left beim br-Tag weg, dann wirst du sehen das die Hintergrundfarbe von Content (background-color: tan) nicht hinter leftSide und rightSide zu sehen sein wird.

Da sie aus dem "flow" genommen werden, verbrauchen Sie auch keinen Platz im Dokument; d.h. das #content-Div ist quasi leer (auch wenn die left/rightSide DIVs eigentlich drinnen sind) bzw. wird leer dargestellt.

Wenn aber ein Element mit dem gesetzt clear-Property folgt, erzwingt es den folgenden Bereich unter die floats zusetzen; und somit gibts auch kein Problem mehr in diesem Beispiel mit der Hintergrundfarbe.

right/left bei float gibt an, auf welcher Seite ein Reihen unter den floats erzwingen werden soll. Floats koennen ja links oder rechts ausgerichtet sein, darum die zwei angaben. Oder beide mit "both".

HTH