Jag försöker lära mig CSS bl.a. possitionering. Det det till synes kaotiska beteendet hos olika funktioner gör mig mycket förbryllad och jag undrar om någon kan hjälpa mig att förstå vad som händer.
Poägen är alltså inte att jag ska lösa en speciell uppgift utan att kunna förstå vad som händer för att kunna ha nytta av detta senare.
För tillfället ska jag positionera två kolumner bestående av två <div> inne i en wrapper <div>. Html är följande:
<html>
<head>
<title>
postest
</title>
</head>
<link rel="stylesheet" type="text/css" href="test.css"/>
<div id=main>
<div id=first>
yyy
</div>
<div id=second>
xxx<br>
xxx
</div>
</div>
</html>
CSS är följande:
#main
{
background: yellow;
width: 800px;
}
#first
{
background: blue;
width: 50%;
height: 100%;
float: left;
}
#second
{
background: red;
width: 50%;
height: 100%;
float: left;
}
Jag har nu några frågor som jag undrar om någon vänlig person skulle kunna besvara:
1. Om jag sätter "width" i #main till 100% istället för 800px förflyttar sig den den röda kolumnen neråt istället för att vara kvar till vänster. Hur kommer det sig?
2. Om float "float: left" is #second kommenteras bort blir den röda kolumnen bara hälften så bred som om "float: left" finns. Varför är det så?
3. Jag skulle vilja att de båda kolumnerna #fist och #second fyllde ut #main-rutan ända ner till botten (så att den gula bakgrunden inte syns). Om jag sätter "height" på 100% kan man tycka att detta borde ske men icke.
Varför inte och hur borde man göra i för att detta ska fungera?
4. Jag har sökt i forumet, och sett att display:inline används offta tillsammans
med liknande possitionerings problem. Min bok beskriver inte på ett bra sätt vad man använder display:inline till, så jag undrar vad det är bra för i detta sammanhang?