Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

"clear: left" verpest rechter kolom

2 antwoorden
  • Sorry van de vage onderwerp-omschrijving. Vreemd genoeg kom ik hier niet uit: Ik heb een twee kolommen, de linker bevat content, de rechter een aantal dingen die ik even voor het gemak 'widgets' heb genoemd. De content kolom is een float aan de linkerkant, en de rechterkolom heeft gewoon een margin aan de linkerkant zodat die float er mooi tussen past. [url=http://www.arnodegraaf.nl/float/float.html]klik hier voor het voorbeeld[/url] Nu bevatten twee widgets in de rechterkolom een image, en die wil ik naar links floaten. Geen probleem, is ook gelukt zoals je ziet, maar de laatste widget komt dan op de verkeerde plek: ernaast ipv eronder. Dat is logisch, en normaal gesproken los je dat op met een [color=blue:d4f7b1caa4]clear: left[/color:d4f7b1caa4] of een [color=blue:d4f7b1caa4]clear: both[/color:d4f7b1caa4], maar dan wordt die hele kolom afgebroken, want die content kolom aan de linkerkant is dus ook een floatende div, dus dan gaat-ie pas daaronder weer verder! [url=http://www.arnodegraaf.nl/float/float2.html]klik hier voor het resultaat met clear: left[/url] Hoe kan ik dit oplossen?
  • Je doet clear maar geen float, met clear zet je een element na een float op een nieuwe regel maar in jouw geval is er geen float om te clearen, behalve dan de content colom. De volgende derde widget div komt niet op een nieuwe regel omdat het plaatje van de tweede widget uit de div steekt, en het plaatje is een "inline" element, dus een volgend element komt op dezelfde regel. Je hebt helemaal geen clear nodig, alles wat je hoeft te doen is die twee widget divs met een plaatje float:left meegeven en je bent klaar (in ff, niet gechecked in ie6/7) (ook de container overflow:hidden doen).

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.