• Acasă
  • Despre noi
  • Autori
  • Mărturii
  • Arhivă
  • Trimite Articol
  • Contact

WORLDIT

Lumea în 1 și 0.

  • Știri
    • Tehnologie
    • Tehnologie mobilă
    • Securitate
    • Developers
    • Știință
    • Benzi desenate
    • Jocuri
    • Intern
  • Tehnic
    • Browser
    • C#
    • C/C++
    • Challenge
    • HTML/CSS
    • Javascript, Ajax, jQuery
    • Open Source
    • PHP
    • Python
    • Securitate IT
    • Socializare
    • WordPress
    • Altele
  • Recenzii
  • Interviuri
  • Evenimente

Problema „float” in CSS

7
  • Publicat de Andrei Avădănei
  • în HTML/CSS
  • — 13 oct., 2009 at 2:55 pm

Defapt este mai mult neatentie decat o Problema dar m-am gandit sa scriu o mica rezolvare daca faceti vreaodata o greseala de genul:

floatproblem

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;
}

floatproblem

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.

Etichete: bugcssfloatHTMLproblemarezolvareTehnicthieunu

— Andrei Avădănei a scris 1246 articole

Andrei scrie pe worldit.info din vara lui 2011. Este fondatorul Asociatiei Centrul de Cercetare in Securitate Informatica din Romania - CCSIR si coordoneaza DefCamp, cea mai importanta conferinta de securitate informatica & hacking din Europa Centrala si de Est. Andrei ofera in cadrul Bit Sentinel servicii de securitate informatica, penetration testing, security management, recuperarea de pe urma unui atac cibernetic, training-uri si workshop-uri.

  • Articolul anterior Sfaturile unui Amator
  • Articolul următor Cateva trucuri si sfaturi pentru CSS

7 Comentarii

  1. Adrian spune:
    octombrie 14, 2009 la 5:48 pm

    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.

  2. Adrian spune:
    octombrie 14, 2009 la 5:51 pm

    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” />

  3. Patrascu Vlad spune:
    octombrie 14, 2009 la 6:34 pm

    Sunt mai multe rezolvari am prezentat doar una.
    Poti face si clear: both; si overflow: hidden;

  4. Adrian spune:
    octombrie 14, 2009 la 6:43 pm

    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 :).

  5. Adrian spune:
    octombrie 14, 2009 la 6:45 pm

    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!

  6. Avadanei Andrei spune:
    octombrie 14, 2009 la 7:27 pm

    S-a rezolvat problema cu editarea, multumesc de sfat si te mai asteptam pe aici. 😀

  7. Claudiu spune:
    octombrie 15, 2009 la 9:11 am

    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 🙂


  • Facebook

    WorldIT.info
  • Ultimele Atacuri Cibernetice din Romania – RO Hacked

    [wp_rss_retriever url="https://rohacked.bit-sentinel.com/feed/" excerpt="none" items="5" read_more="false" new_window="true" thumbnail="false" cache="0"] RO Hacked este registrul atacurilor cibernetice din România.
  • Caută

  • Articole Recomandate

    • Recent Posts
    • Tags
    • Număr record de participanți la DefCamp 2015, cel mai important eveniment dedicat securității cibernetice din Europe Centrala si de Estdecembrie 2, 2015
    • La DefCamp 2015 vei afla prin ce tehnici pot fi evitate măsurile de securitate ale sistemelor informatice criticeoctombrie 16, 2015
    • Ultima sansa sa rezervi bilete de tip Early Bird la DefCamp 2015septembrie 1, 2015
    • 15 sfaturi despre cum poti deveni un programator bun venite de la specialisti romaniaugust 4, 2015
    • algoritmica Android antivirus Apple Avadanei Andrei benzi desenate BitDefender blog browser C++ Chrome concurs eveniment Facebook Firefox Google google chrome hacking html5 infografic informatica internet Internet Explorer IT javascript linux Microsoft Mozilla Firefox online PHP programare retea sociala review Romania securitate Tehnologie Twitter web Windows Windows 7 Wordpress WorldIT worldit.info Yahoo! YouTube
  • august 2022
    L Ma Mi J V S D
    1234567
    891011121314
    15161718192021
    22232425262728
    293031  
    « dec.    
  • Link-uri Sponsorizate

    • laptop second hand

    • Calculatoare Second Hand

    • cod voucher pc garage

  • Home
  • Tehnic
  • HTML/CSS
  • Problema „float” in CSS
  • Important

    • Bit Sentinel
    • Centrul de Cercetare în Securitate Informatică din România
    • DefCamp
  • Prieteni

    • BetiT.ro
    • bijuterii handmade
    • Computerica | Resurse gratuite PC
    • Descopera.org
    • Gadgeturi si IT – Giz.ro
  • Prieteni

    • PC – Config
    • RO Hacked
    • Stiri IT

Copyright © 2009-2014 WORLDIT. Toate drepturile Rezervate.
Termeni și condiții | Contact | Licența Creative Commons