login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Wrapper en een automatische hoogte.

Offline Kosmoseistis - 14/06/2011 14:47
Avatar van KosmoseistisLid Hoi beste lezer,

Dacht eigenlijk goed overweg te kunnen met css en html. Maar gisteren zat ik verveeld met volgende probleem:

Gebruik een wrapper-div om mijn website te centreren. Ondertussen heb ik die ook een border gegeven. Verder krijgt hij ook de eigenschap: height:auto;

Uiteraard zitten in mijn wrapper vele andere div's, de meeste daarvan heb ik de eigenschap FLOAT moeten geven om ze op de juiste plaats te krijgen.

Bij de eerste div, float links en twee div's float right, worden deze nog mooi in de wrapper geplaatst. Maar van zodra ik verder te gaan met de div's en floats, komen die allemaal buiten de wrapper te staan (zie enkele lijnen van de border nog staan)  

Dien ik een regel toe te voegen aan mijn wrapper-div om? herkent iemand het probleem? iemand suggesties tips

Helaas momenteel niet thuis en kan ik mijn code niet toevoegen 

bedankt voor het lezen van mijn post
Kosm

7 antwoorden

Gesponsorde links
Offline MiST - 14/06/2011 15:27
Avatar van MiST Lid voeg aan je wrapper toe:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. overflow: hidden;


Hierdoor forceer je om alle divs volledig in je wrapper te steken.
Bedankt door: Kosmoseistis
Offline Kosmoseistis - 14/06/2011 16:12
Avatar van Kosmoseistis Lid Thanks Mist,

ga ik vanavond onmiddellijk toepassen en laat je weten of het werkt, maar vermoed alvast van wel, was hier al wat aan het googlen geweest Maar kon niet testen en toch mijn vraag eens posten 

Alvast bedankt Mist,
tot mijn antwoord
Ko
Offline WouterJ - 14/06/2011 16:48 (laatste wijziging 14/06/2011 16:49)
Avatar van WouterJ HTML gevorderde Dan kan je beter de floats clearen door vlak voor het sluiten van de wrapper <div style="clear:both;"></div> neer te zetten. Dan zit je niet vast aan die overflow hidden.

Deze methode kan je ook met alleen CSS toevoegen:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #wrapper:after
  2. {
  3.   content: '';
  4.   display: block; /* Ik weet niet of dit nodig is */
  5.   clear: both;
  6. }
Bedankt door: Kosmoseistis
Offline Kosmoseistis - 16/06/2011 13:59
Avatar van Kosmoseistis Lid Thanks waldio,

voor je ander voorstel! Had zopas MiST zijn oplossing geprobeerd met de Overflow:auto; en dat werkt reeds goed. Straks zal ik jouw oplossing testen en zeker laten weten of hij eveneens goed werkt.

Allebei alvast een dikke merci voor de ondersteuning. Goed advies is altijd leuk, kleer bij .

Tot laters.
Kos
Offline Kevin - 21/06/2011 21:47
Avatar van Kevin Crew Ajax/REST Waldio zijn voorstel is CSS3 dus hou er rekening mee dat dit in IE6 - IE8 niet zal werken.

Een alternatief is een clearfix class maken in CSS2 die hetzelfde doet als Waldio zijn :after.

@Kosmoseistis: Duid je ook even aan als er een oplossing is aub?
Bedankt door: Kosmoseistis
Offline WouterJ - 22/06/2011 16:40
Avatar van WouterJ HTML gevorderde @Kevin, after en before zijn toch gewoon CSS2 selectors? (zie ook de beschrijving van W3C)
Bedankt door: Kosmoseistis
Offline lolll - 23/06/2011 17:41
Avatar van lolll Lid Voor moest je er nog niet uit zijn: http://www.quirksmode.org/css/clearing.html, hierin staan alle verschillende mogelijkheden.
Bedankt door: Kosmoseistis
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.176s