Tweet
test
Hallo bin gerade am üben mit css und hänge da bisserl. wahrscheinlich am Verständnis.
Wenn ich einen container auf float:left setze müsste doch der nächste container automatisch neben den anderen container gesetz werden.
warum funktioniert es in meinem beispiel nicht?
muss ich im css beim container3 auch noch mal float:left angeben? und wenn ja warum? das float bewirkt doch immer dass das nächste element gefloatet wird.
Mir ist auch aufgefallen wenn ich "http://www.w3.org/TR/html4/loose.dtd" beim doctype wegnehme stellt der Internetexplorer 8 den container3 so dar wie es möchte und zwar nehben container2
css code
Hallo bin gerade am üben mit css und hänge da bisserl. wahrscheinlich am Verständnis.
Wenn ich einen container auf float:left setze müsste doch der nächste container automatisch neben den anderen container gesetz werden.
warum funktioniert es in meinem beispiel nicht?
muss ich im css beim container3 auch noch mal float:left angeben? und wenn ja warum? das float bewirkt doch immer dass das nächste element gefloatet wird.
Mir ist auch aufgefallen wenn ich "http://www.w3.org/TR/html4/loose.dtd" beim doctype wegnehme stellt der Internetexplorer 8 den container3 so dar wie es möchte und zwar nehben container2
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" href="style.css" type="text/css"> <title>test</title> </head> <body> <div id="container1"> <div id="container2">container2</div> <div id="container3">container3</div> </div> </body> </html>
Code:
html {
width:100%;
padding:0px;
margin:0px;
font-family: verdana, sans-serif;
color: #000000;
}
body {
width:100%;
height:100%;
padding:0px;
margin:0px;
font-family: verdana, sans-serif;
color: #000000;
}
#container1{
background-color:#191C45;
width:800px;
height:900px;
padding:0px;
margin:0px;
color:#ffffff;
}
#container2{
float:left;
background-color:#CC9966;
width:400px;
height:200px;
padding:0px;
margin:0px;
color:#ffffff;
}
#container3{
background-color:#666633;
width:400px;
height:200px;
padding:0px;
margin:0px;
color:#ffffff;
}
Kommentar