PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : float Problem - html/css


Streicher
08.03.2012, 10:14
Eigentlich, hatte ich mit der float Funktion, vorallem, da sie so einfach ist, noch nie Probleme. Allerdings jetzt, ich weiß jedoch nicht warum. Sofern ich das sehe hab ich alles richtig gemacht, und bis her hab ich es auch noch nicht anders gemacht, es funktioniert allerdings trotzdem nicht. ^^

html-code



<html>

<head>
<link rel="stylesheet" type="text/css" href="Übung_für_Arbeit_01.css">
</head>

<body>
<div class="header">
</div> <!-- header -->

<div class="linkleiste">
</div> <!-- Linkleiste -->

<div class="links">
</div> <!-- Feld links -->

<div class="rechts">
</div> <!-- Feld rechts -->
</body>


</html>



css-code


.header
{
width: 600px;
height: 200px;
border: 1px solid black;
}

.linkleiste
{
width: 600px;
height: 50px;
border: 1px solid black;
}

.links
{
width: 200px;
height: 550px;
border: 1px solid black;
float: left;
}

.rechts
{
width: 400px;
height: 550px;
border: 1px solid black;
}



Das Problem ist, dass die untere div-Box "rechts" zwar nach oben rückt, allerdings nicht direkt neben "links" sondern darunter. Warum auch immer, ist mir bis jedenfalls noch nie passiert. Kann mir da jemand weiterhelfen?


Gruß
Streicher
Flying Sheep
08.03.2012, 10:26
Wenn die Box "rechts" rechts neben "links" stehen soll, solltest du auch dort ein float: left; hinzufügen. Damit reiht sie sich quasi in den "Fluss" ein. ^^



.rechts
{
float: left;
width: 400px;
height: 550px;
border: 1px solid black;
}


[edit]
Ich hoffe, dass das nur ein bewusst schnell zusammengestrickter Quellcodeausschnitt ist. Andernfalls solltest du dir gängige Dinge wie Doctype-Definition, etc. aneignen.
Streicher
08.03.2012, 10:32
Ok, jetzt funktioniert es, danke. :)

EDIT: Naja, das ist nur ne Übung für die Schule, da ich morgen Info-Leistungskurs-Arbeit schreibe. Und ehrlich gesagt hab ich von "Doctype-Definition" noch nie etwas gehört. ^^