Content in div hem laten oprekken

Pagina: 1
Acties:

Onderwerpen


Acties:
  • 0 Henk 'm!

  • TheBlasphemer
  • Registratie: September 2004
  • Laatst online: 21-06 12:09
Stel, ik heb een div op een pagina die gewoon volledige width pakt, met daarin een div met een flinke grootte, bijvoorbeeld zoiets als dit:
HTML:
1
2
3
4
5
6
7
<html>
<body>
<div style="background-color: #00F;" id="divA">
<div style="width: 3200px;" id="divB">Test</div>
</div>
</body>
</html>

Hierin verwacht ik dat de buitenste div nu ook 3200px breed wordt, immers hij zou moeten oprekken om z'n inhoud te laten zien.
Echter de buitenste div blijft slechts de breedte van het venster, en als je scrollt zie je dat de achtergrond van die buitenste div niet doorloopt.

Zou iemand me kunnen uitleggen waarom dit gebeurd, en hoe ik dit eventueel kan verhelpen ?

[ Voor 1% gewijzigd door RobIII op 25-07-2011 19:31 . Reden: Code tags toegevoegd ]

[img=http://www.web2messenger.com/smallstatus/w2m/theblasp.png]


Acties:
  • 0 Henk 'm!

  • alex3305
  • Registratie: Januari 2004
  • Laatst online: 11-09 22:33
Dit komt doordat de buitenste div een relatieve positie heeft, waardoor alleen het gedeelte op het scherm wordt getekend. Als je deze absoluut maakt, dan wordt wel alles getekend, ook buiten de viewport.

HTML:
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <head><title>Test with large div's</title></head>
    <body>
        <div style="background: #00f; position: absolute;">
            <div style="width: 3200px;">Test</div>
        </div>
    </body>
</html>


Vergeet overigens niet aan indentation en een Doctype te denken :). Ook hoef je de interne div's niet perse id's of classes mee te geven wanneer je er niets mee doet.

Acties:
  • 0 Henk 'm!

  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
^ Wat hij zegt. Verder: Als je code post gebruik dan code tags a.u.b.

[ Voor 10% gewijzigd door RobIII op 25-07-2011 19:32 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij