Startpagina / Samenvattingen / Web programming step by step / element-float-h1

Page layout - Floating elements - Multi colomn floating layout

4 belangrijke vragen over Page layout - Floating elements - Multi colomn floating layout

Wat is het verschil tussen float:right; en text-align:right;

Het zetten van text-align:right houdt in dat de tekst rechts uitlijnt. Er kan links (afhankelijk van de breedte van de tekst) dan wel een ruimte open blijven, maar er kan geen content van een ander element naast de tekst terecht komen

Bij het zetten evan float:right; kan dat wel gebeuren (mits de breedten van het element dat de tekst bevat en het volgende element dat toestaan)

Als je 2 opeenvolgende elementen naar dezelfde kant an de pagina float,wat gebeurt er? Hoe verschijnen de 2 elementen op je scherm?

Wanneer de breedten het toelaten zullen de elementen naast elkaar komen. Bij een float: left komt het eerste element het meest links en het tweede element daarnaast; bij een float:right komt het eerste element het meest rechts en het 2e element er naast

Waarom is het belangrijk om width op een floating element in te stelllen? Wat kan er gebeuren als je dit niet instelt?

Als er geen breedte is gezet en het element heeft geen impliciete breedte (zoals bijvoorbeeld een afbeelding) zal het element de volle 100% als breedte innemen. Er past dan geen ander element, of content van een ander element meer naast

Gegeven is de volgende code:
<div id="main">
   <h1>Mijn site</h1>
   <img src="images/starhome.png" alt="starhome"/>
   <p> heel veel tekst....</p>
   <p>nog meer tekst....</p>
   <p> nog veel meer tekst...</p>
</div>
Welke CSS code is nodig om de h1 sectie links boven te krijgen met een zwarte rand om de tekst, het plaatje links te krijgen en de tekst (p) om de 2 elementen te vormen

#main{
   overflow: hidden;
   height: 20em;
}
h1 {
   width: 8em;
   float: left;
   border: thin solid grey;
   margin: 1em;
}
img {
   float: right;
   margin-left: 1em;
}