Problema “float” in CSS
bug, css, float, HTML, problema, rezolvare, thieunu
Defapt este mai mult neatentie decat o Problema dar m-am gandit sa scriu o mica rezolvare daca faceti vreaodata o greseala de genul:
Avem trei div-uri unul cu id=”content” unul cu class=”article” si unul cu class=”sidebar”.
<div id="content"> <div class="article"> <p>Lorem ipsum sit dolor amet</p> <p>Lorem ipsum sit dolor amet</p> <p>Lorem ipsum sit dolor amet</p> <p>Lorem ipsum sit dolor amet</p> </div> <div class="sidebar"> <p>Lorem ipsum sit dolor amet</p> <p>Lorem ipsum sit dolor amet</p> <p>Lorem ipsum sit dolor amet</p> <p>Lorem ipsum sit dolor amet</p> </div> </div>
In CSS am scris urmatoarele:
#content {
background: blue;
padding: 10px;
}
.article {
float: left;
background: yellow;
padding: 10px;
}
.sidebar {
float: left;
background: green;
padding: 10px;
}
Dupa cate vedeti .article si .sidebar sunt ambele cu float: left; ar trebui sa functioneze nu?
NU in nici un caz, trebuie neaparat sa punem float: left; si la #content pentru a afisa div-ul corect.
Rezolvarea:
#content {
float: left;
background: blue;
padding: 10px;
}
.article {
float: left;
background: yellow;
padding: 10px;
}
.sidebar {
float: left;
background: green;
padding: 10px;
}
Eheeeeee, acum div-ul este afisat corect.
O greseala intalnita, acum aproximativ 1 an jumate cand am inceput sa folosesc CSS-ul, aceasta a fost prima mea greseala si am stat 30 de minute sa o rezolv.
Autor : thiefunu.
Recomandam, pe aceeasi tema
Despre autorul articolului :
Fondator si redactor worldit.info, ma numesc Andrei si sunt pasionat de programare , in special de algoritmica si web development. Forumul WorldIT iti sta la dispozitie daca ai nevoie de suport tehnic, informatii si sugestii privind diverse produse prezentate pe blog si nu numai. Mai multe detalii despre activitatile mele aici.
Nou pe 
Nou pe 
Comentarii la "Problema “float” in CSS"
Si daca eu nu am nevoie de float left la content ? Ce fac?
Incearca asta:
Lorem ipsum sit dolor amet
Lorem ipsum sit dolor amet
Lorem ipsum sit dolor amet
Lorem ipsum sit dolor amet
Lorem ipsum sit dolor amet
Lorem ipsum sit dolor amet
Lorem ipsum sit dolor amet
Lorem ipsum sit dolor amet
Si s-a rezolvat problema, fara sa pun float left la content.
Mda… ar trebui sa instalezi si un plugin care sa-ti dea posibilitatea sa editezi un comentariu in maxim 1 minut dupa ce l-ai postat, ca poate se mai intampla sa greseasca omu` si sa poata sa-si corecteze greseala.
Rezolvarea e simpla, dupa inchiderea div-ului cu clasa sidebar adaugi un br clear=”all” />
Sunt mai multe rezolvari am prezentat doar una.
Poti face si clear: both; si overflow: hidden;
Da, ideea e ca la overflow hidden si la varianta prezentata mai sus (aia cu float left) pot aparea conflicte. Bine, in cazul prezentat cu content si 2 coloane, nu prea cred, dar se poate intampla sa folosesti 3-4 div-uri asezate sub forma aia doar pentru un anume element al site-ului, si daca ii dai float left, si nu ai nevoie de float left… nu prea mai merge solutia
.
In fine, ma plictiseam si am dat de blogul tau(vostru) si mi s-a pus pata pe comentarii
.
Gata! Imi iau jucariile si plec acasa.. am stat prea mult la birou pe ziua de azi!
Bafta cu blogul!
S-a rezolvat problema cu editarea, multumesc de sfat si te mai asteptam pe aici.
Uite asta nu stiam, eu foloseseam un div cu clasa clear ( {clear: both;} ) pe care il puneam inainte sa inchid div-ul care contine elementele cu float. Afterall, #content e la randul sau in alt div, cel mai posibil un wrapper. Pe ala poate vrem sa-l centram, deci pica ideea cu float: left