nicht angemeldet
Hallo,
Doch, das geht. Im Anschluß gibt's mal ein schnelles Quellcodegefrickel, wo es funktioniert. Da wird ein BUG im IE deutlich, wenn man den nicht behebt, rauschen beide floats untereinander- vielleicht war das Dein Problem.
Oder Du hast das ELternelement nicht positioniert. In dem Beispiel mit position:relative. Dann richten sich die %-Angaben der Kinder nach diesem Element.
Zum IE-float-double-margin-bug (oder wie man ihn nennt) kann ich nicht viel sagen. Ich weiß daß es ihn gibt, verachte den IE ein wenig mehr und worke around. Das ist alles ;)
netten Tag
^da Powl
Achtung, hier kommt ein Karton:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Wir floaten Juhuu!</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0; padding:0;} /* kann man ja mal machen */
html, body {
height:100%; /*da bin ich nicht ganz sicher, schadet aber nicht */
width:100%; /*das muss auf jeden Fall, als primärer Bezug*/
background:black;
overflow:auto;
}
body {
text-align:center; /*hatten wir schonmal */
}
#rahmen {
position:relative; /* das ist eminent wichtig */
width:80%;
height:100%;
background:gold;
margin:0 auto;
text-align:left; /*und Text 'schwupp' wieder linksbündig */
}
#float1 {
float:left;
width:35%;
height:200px;
background:red;
margin-left:10%;
_margin-left:5%; /*IE bug doppelter Abstand bei float*/
}
#float2 {
float:left;
width:35%;
height:200px;
background:green;
margin-left:10%; /*hier versteht IE es dann richtig- das können andere vielleicht erklären*/
}
#float1, #float2 {
margin-top:100px;
}
</style>
</head>
<body>
<div id="rahmen">
<h1>Unter mir zwei Chaoten: beide am floaten</h1>
<p>Reim Dich oder ich schlag Dich... ^^ </p>
<div id="float1">
<p>ich floate</p>
</div>
<div id="float2">
<p>das kann ich auch :P SO grün bin ich nicht mehr!</p>
</div>
</div>
</body>
</html>