✔ div mit float soll Elterndiv beeinflußen

[chmee]

Hai Alle und Hi Maik

http://www.phreekz.de/Test2

Ich habe in den Point-Divs Bilder, die per float nach rechts oder links gelegt werden dürfen. Nun sieht das mal wieder in IE OK aus, in FF werden die Bilder nicht umschlossen und sie verschieben sich gegenseitig.

Auszug CSS:

#Content{position:absolute;
  text-align:center;
  left:10px;
  top:260px;
  /*width:702px;*/
  z-index:10;
  background-color: #000000;
}
/* Content Inhalt */
.Point{position:relative;
  text-align:justify;
  width:700px;
  z-index:11;
  background-color: #222222;
  border: 1px solid #555555;
  color: #AAAAAA;
  padding:5px;
  margin:10px 0px 10px 0px;
}
.Datum{float:left;
  text-align:left;
  width:220px;
  height:25px;
  z-index:12;
  color: #FFFFFF;
  padding:5px;
}
.Ueberschrift{float:right;
  text-align:right;
  width:440px;
  height:25px;
  z-index:12;
  color: #FFFFFF;
  padding:5px;
}
.img_left{float:left;
  border: 1px solid #555555;
  margin:0px 5px 0px 0px ;
  overflow:visible;
  z-index:20;
}
.img_right{float:right;
  border: 1px solid #555555;
  margin:0px 0px 0px 5px;
  overflow:visible; 
  z-index:20;
}

mfg chmee

 

[Maik]

Hi chmee

Die Floatumgebung muss zum Abschluß noch aufgehoben ("gecleart") werden, damit im Dokument wieder der normale Textfluss hergestellt ist, und der Inhalt die umschliessende Box .Point am unteren Elemenrand nicht "überlappt" - siehe http://positioniseverything.net/easyclearing.html.

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Die Klasse .clearfix wird dann zusätzlich im DIV .Point aufgerufen:

<div class="Point clearfix"> ... </div>

Oder du wendest das Stylesheet auf die Klasse .Point an

.Point:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.Point {display: inline-block;}

/* Hides from IE-mac \*/
* html .Point {height: 1%;}
.Point {display: block;}
/* End hide from IE-mac */

 

[chmee]

Wieder ein Dank für die Hilfe. Unglaublicherweise hat der Tip nicht geholfen, sondern als ich dem Block Point ein float:left; gegeben habe, sah es unter FF & IE super aus. Manchmal ist die Welt verrückter als Ich

mfg chmee

 

[Maik]

Seltsam, bei mir greift der Lösungsvorschlag: