Hoi Henk,
Als ik naar je pagina
[url]www.cinemashop.nl/kennet.html[/URL] ga en daar wat tekst in de <div class="div2"> plak, vliegt er niets naar links of rechts, maar bloest de tekst alleen aan de onderkant uit zijn div:
Het in het midden niet zichtbaar zijn van de div2-tekst komt vanwege de losse <p> en de <p> in de footer, die alle twee een lichtblauw image van 30px hoog er in hebben zitten. Die <p>'s staan verderop in de html-code, dus overlappen dan de overbloezende tekst van de eerder geplaatste div2.
De vaste hoogte van de (hier rood-omrande) div2 zorgt dat de tekst ook zichtbaar is onder de div2, en komt op hetzelfde neer als wanneer je de div2 een {overflow:visible;} geeft.
Als je ervan maakt
.div2 {overflow: hidden;}, dan is de tekst onder de div2 niet meer zichtbaar, maar is ook met geen mogelijkheid meer door de bezoeker te pakken te krijgen.
- Behalve door de broncode te gaan bekijken.
Als je ervan maakt
.div2 {overflow: auto;}, dan is er geen tekst onder de div2 meer zichtbaar, maar komt er bij te veel tekst automatisch een binnengaatse scrollbar bij:
Als je ervan maakt
.div2 {overflow: scroll;}, dan komen er altijd scrollbars, ook als de tekst er wel in past.
De tekst komt in de breedte niet uit de breedte van de div2, want de tekst gaat gewoon naar de volgende regel.
Zet je echter bij een visible overflow in de div2 een
image dat breder is dan de breedte van de div2, dan komt dit aan de rechterkant uit de div2 zetten:
Dat er hier een hoekje van het img afgepikt wordt, komt vanwege de div3 aan de rechterkant, die een witte achtergrond heeft. Die div3 komt later in de html-volgorde, en komt dus boven de afbeelding te liggen.
Bij een
.div2 {overflow: auto;} of
.div2 {overflow: scroll;} is wat er niet van de foto binnen de div2 past onzichtbaar, maar er is een binnengaatse horizontale scrollbar waarmee je naar de rechterkant van de foto kunt schuiven:
Met vriendelijke groet,
CSShunter
