CSS Layouting - #8 Float

[@rinositanggang2632]

vidio pak sandi sangat mudah untuk di pahami ( asalkan niat dan tekun), hampir satu bulan saya belajar dari channel pak dika. aku sudah bisa membuat web sekolah ( dari menggabungkan semua ilmu yang sudah di pelajari dari channel pak dika) membuatnya dari html & css. kesalahan belajar yg saya alami adalah 1.terlalu terburu-buru dalam belajar. project paling besar saya adalah membuat web sekolah dengan 5 halaman berbeda. saya butuh 7 jam untuk membuat web sederhana itu. yang saling terhubung satu sama lain. percaya atau gak percaya saya belajar ngoding dari jam 09:00-12:00 siang 18:00 sampai jam 23:00 malam saran untuk saya dan teman2 yang sedang belajar, jangan bilang... 1. ih susah 2.sy gak bakal bisa buat itu 3.gw mah g#b#o# semangat😀😀 walaupun otak udah pusing, pusing itu wajar, yang gak wajar itu belum nyoba udah bilang gak bisa. tahun ini masuk smk, gak terasa banget waktu😅😅 mohon maaf kolo komen saya susah untuk di pahami😁😁. terima kasih pak sandi atas ilmunya...yang sangat bermanfaat. semoga pak sandi bisa semakin sehat, kaya and pinter. vidionya ngebantu banget buat saya yang MISKIN😅😅 terima kasih pak dika😀😀

[@_go1308]

Cuma ingin share aja pak dosen, karena saya seminggu lebih cuma berkutat di video sekitar float dan position saja tanpa memahami secara pasti. jadi setelah ngulik dan nyetet, dapet info sbb. inilah yang terjadi ketika float digunakan : 1. elemen yg diberikan float akan dipaksa ditempatkan pada kiri atau kanan sesuai valuenya. 2. posisinya hanya bisa di kanan atau kiri saja dari pembungkus, bisa gunakn position namun elemen html teks akan menganggap float tersebut posisinya sama seperti semula (wrappingnya tidak mengelilingi elemen float yang diberi properti position non static) 3. elemen yg diterapkan float letaknya setelah elemen html sebelumnya yg tidak diberi float (sesuai susunan kode yg kalian tulis pada html) 4. elemen yg diterapkan float akan keluar dari flow normal (seperti dimensi baru) 5. float bisa ditaruh secara berjejer (seperti foto galeri) jika elemen secara berurutan diberikan float. apabila pada urutan elemen tsb ada yg tidak diberi float maka elemen float setelahnya akan ditempatkan pada flow-float yang baru 6. elemen yg diberi float akan dianggap tidak ada pada struktur html membuat elemen dibawahnya terdorong ke atas (dianggap tak ada) 7. jika elemen setelah elemen float terdapat teks, maka teks tersebut akan menganggap elemen float tersebut eksis, maka dari itu reaksinya adalah mengelilingi elemen tersebut/wrapping (special css rule) 8. karena poin nomer 6, ketika float digunakan pada elemen yang terdapat pada container akan terjadi container collapse namun bisa diperbaiki dengan properti clear 9. ketika digunakan clear maka elemen yang atau setelah diterapkan properti clear akan memasuki float-flow yang baru mohon dikoreksi jika salah, saya share karna banyak yg bingung sama text wrapping (poin 7)

[@ahmadumam2380]

❤

[@asalgaming3384]

Kalo boleh saya jujur mas dari semua video pemograman yang saya liat di youtube cuma video mas aja yang mudah di mengerti dan sangat detail menjelaskannya . Semoga sukses selalu mas

[@sandhikagalihWPU]

terimakasih yaa.. :)

[@asalgaming3384]

Saya mau bertanya mas jika saya ingin belajar javascript minimal saya sudah mahir di html dan css ya mas ? Terimakasih

[@sandhikagalihWPU]

sebaiknya iya

[@rinaparkjiyeon7047]

Aamiin

[@rosii_tahrurozi_2106]

Pak dika ilmu bapak sudah bermanfaat, semoga buat bapak mendapat balasan yg baik, jangan berhenti upload ya pak, terimakasih banyak...

[@no-basabasi]

bukan sudah.. tapi sangat, saya belajar html sampe css disini

[@wahyunugroho1262]

Alhamdulillah seminggu udah sampe sini. Tiap 1 video. 2x ngulang2

[@wecreateandshare]

kuliah mahal2 abis puluhan bahkan ratusan juta dan harus nempuh 4thn ehh dsini dikasi secara gratis dong sungguh mulia sekali mas sandika ini semoga menjadi ladang amal jariyah buat mas sandika sukses dan sehat selalu

[@pradiptaramadhan3011]

Alhamdulillah saya bisa paham langsung.. 🙏

[@zerofivemrm2212]

Alhamdulillah pak, ada project yang nyuruh buat kop surat :3 akhirnya udah bisa gara-gara lihat video ini.

[@REMAJA.BERKEMBANG]

makasih pak, chanel ini membantu sekali buat yang pemula

[@muhammadirfanmusthofa7373]

Makasih Banyak Bang 90% Skill saya dari Abang semua.Sangat sangat Membantu 😂

[@Islamic_Rand0m1520]

wah baru nih sma ky gua🤣

[@salmantechno]

Terima kasih Pak atas sharing ilmunya 🙏 Bermanfaat sekali Ayo belajar dan berkembang bersama SalmanTechno 💪👍

[@elvirafirmansyah348]

Terima kasih pak sudah membagikan ilmu yang bermanfaat

[@sofyanekosanjoyo8091]

Terima kasih banyak sharing ilmunya Pak Sandhika, semoga sehat selalu dan makin sukses karirnya. Aamiinn... :)

[@wangsaffmeal6157]

Nah ini yg kucari cari, ternyata make float

[@un4v5s83]

Terima kasih saya sampaikan karena inilah yang saya cari-cari yaitu untuk membuat kolom-kolom pada 1 halaman website

[@frappuccino9297]

Jelas banget penjelasannya Terima kasih...

[@ardinbangets]

Entah sdh bbbrp kali kuulang videonya...dan sukses membuat aku lupa materi2 di video sebelumnya....

[@ardinbangets]

anyway...Tq pak...ilmunya sangat bermanfaat

[@shopee_ootd]

Same dude👍

[@muhammadyusup4239]

Pak sandikah keren videonya.

[@dhimasbudiarso6132]

terimakasih untuk ilmunya,

[@starsphere3179]

Terima kasih mas, penjelasan dan prakteknya mudah dipahami. Saya baru belajar layout web, dan lihat video2nya mas dika sebagian teknik2 layout web sudah mulai paham

[@davidrobby722]

akhirnya jadi lebih paham soal float ini..makasih pak

[@AbdulMalik-og6up]

Terima kasih banyak pak dika atas ilmunya.🙏👍

[@sumardiabdal]

Terima Kasih Ilmunya bang

[@maulanaarvy]

Berkah mas

[@ininamakokharusdijarak6815]

keren

[@faktabola112]

Terimakasih ya pak 🤗🤗🤗🤗🤗🤗

[@priapunyakarya]

Aku suka tutorial dari bapak

[@pocketprime]

buat yang masih bingung, ini ada penjelasan menggunakan 3d tentang float kzbin.info/www/bejne/rpLVkmeQZsdkbqs

[@Mizu_Desu]

thanks bg, jadi ada gambaran tentang float ini cara kerja nya gimana hhe, walau telat 1th

[@user-py8wc6uk8i]

Semoga bisa mengikuti sampai bisa membuat aplikasi berbasis web, ditunggu selalu ilmunya yg bermanfaat ini bang galih... Semoga Allah membalas kebaikan Bang Galih dg sebaik2nya balasan.... Aamiin Bang Galih saya email Bang Galih tolong dibalas ya... Terima kasih

[@ayyraxx3257]

Alhamdulillah 🙏

[@okeybrayy]

mantap pak

[@noakmansnandifu3671]

thank's pa..!!

[@thoriqtau]

terima kasih pak

[@teguhafriansyah.]

Pa, berati float ini hampir mirip dengan position absolute dong, berpindah tanpa meninggalkan bekas di posisi sebelumnya. bukannya bgtu ya pa? hehe😁

[@ammigelora5906]

mamfaat sekali

[@benhardi2179]

bang dika, mau tanya dong. saya masih bingung. di contoh awal kan kalo dikasih float left, maka kotak yg di bawah nya bakal hilang (sebenarnya naik ke atas dan ketutup kotak lain). nah tapi pas contoh text wrapping dan setelah2nya, kenapa tulisan / kotaknya malah bisa jadi bersebelahan dengan gambar atau kotak yg lain dan tidak hilang ketika dikasih float left? terima kasih bang.

[@doabundo6067]

David Ben' up

[@rizkioding6546]

mungkin karna element yg dipake adalah image

[@ahmadmuslih]

menurut saya karena div itu merupakan elemen kosong jadi gak ada kontennya, nah image dan text itu konten jadi gak saling menimpa

[@arifabs7293]

Up bang tolong jawab bang

[@fadhlurrahman2588]

Sepertinya karena element teks yang disebelahnya... jikalau diganti bukan teks maka akan ditimpa oleh gambar yang telah kita beri float... saya telah coba mengganti paragraf dengan div maka ditimpa... kemudian saya mencoba mengganti gambar tersebut dengan div tetap masih terjadi text wrapping.... Kesimpulan Dari saya Mungkin HTML Telah tetapkan pada paragraf untuk dapat melakukan text wrapping terima kasih :)

[@lpkalamincourse]

korea hadir

[@guntarahambali4318]

pak saya mau bertanya. utk gallery yang menyamping, kenapa tidak kita gunakan display inline block ya pak?

[@mikhaeldiazflorespeople997]

Kenapa text tidak menganggap gambar itu out of flow? Sementara box 3 tadi menganggap box 2 yang di beri float itu tidak ada?

[@RizkyRamadhana26]

Pertanyaan yang sama 👆🏻👆🏻👆🏻

[@MrLook19]

klo menurut saya, beda perlakuan float, antara img vs img dengan img vs text

[@iwanyahya2214]

Terima Kasih Ilmunya

[@nolep5555]

bedanya float sama position absolute apa ya ?

[@animetiles6741]

nonton pada tangal 28/11/2020

[@kamshorymt]

Saya udah lebih 10 tahun aja pake float masih sering ngaco tampilannya 😂😂😂😂

[@finance478]

Thanks pak dosen, semoga diberi balasan oleh Allah

[@sitinurhidayah7482]

sangat bermanfaat mas, update terus... sudah saya subscribe hehe

[@sandhikagalihWPU]

+Faiz Akmal Terimakasih Faiz.. :)

[@akhyaar2442]

saya tonton dari awal om. dan sdh sampsi sini. seru banget om dan mudah di pahami.... tp pada float ini yg saya bingung. knp pada saat contoh 3 kotak berjejer, saat di float left kotak tengah nya . kotak yg bawah berlindung di balik kotak tengah... sedandkan pada saat membuat textwrapping, ketika image ny di float text ny malah mengelilingi tapi tidak bersembunyi di belakang gambar... mohon penjelasannya om. karena saya bener2 pemula. dan belajar dari channel web programming unpas

[@sandhikagalihWPU]

kayanya kamu harus nonton video setelah ini mengenai 'clear' Akhyar.. mudah2an menjawab pertanyaanya nanti :)

[@ritoalit6193]

iya, saat menggunakan beberapa kotak, dan salah satu kotak di beri Float Left, maka kotak selanjut nya bersembungi di belakang.. namun saat penggunaan Text, bukan nya Text terletak di belakang kotak yang di Float, namun berada di samping kotak tersebut, seolah olah text nya juga ikut di beri properti float:left di detik 4.51 video ini, terlihat mas Galih membuat 10 buah kotak dg property left, dan container akan collapse, sedang kan di awal video saat menggunakan img yang di beri property float dengan campuran tulisan, kok container nya tidak collapse ya?? atau begini, bila saya ingin teks nya berada di belakang persis dari gambar itu bgm cara nya? maaf ya, saya bingung di topik ini....

[@VIRGO-nx4eo]

2024 baru belajar 😂

[@yohanespradono5224]

untuk membuat website ecommerce yg punya 2 /3 column lebih baik pakai float, grid, atau flex?

[@mshipdi2852]

Grid lebih mudah

[@robbisyahputra2950]

Hadir

[@naning3645]

selamat pagi, saya mau bertanya waktu saya input di css float left pada html img kenapa posisi tulisan saya tidak berubah seperti di contoh pak dika ya? Mohon bantuannya

[@salmanalfaridzi1191]

Pak dika tolong bahas display flex jg ya pak... . mksh 🙏🏻

[@aqlaar]

Up

[@Islamic_Rand0m1520]

bener yang ini bikin bingung pak😄 bisa ngikutin seperti di video tapi nambahin width nya jadi 814 box-sizing ko kya gk berpengaruh yah???

[@artmosphereID]

mas dika, berarti antar elemen float tidak bisa bertumpuk ya?

[@wishsss5171]

Wow

[@muchlismaaslaitupa8306]

Pak dika... elemen yg dikasi properti float dan elemen dgn properti absolute, bedanya dmna ya?

[@im_human.s]

Halo pak dhika, saya sudah coba latihan tetapi ketika sudah menggunakan properti float si kotak nya tidak bisa sejajar?

[@muhammadiman842]

izin bertanya pak, pas imagenya dibuat floatnya menjadi left, kenapa text berpindah ke kanan image, bukan ke belakang image pak?

[@edokanceel5031]

Saya juga mikir gitu. Mungkin cuma berlaku ke text, lagian di contoh pertama itu div nya kan masih belum ada text nya, jadi bisa ke belakang. Kalo ada yg tau mungkin bisa tolong jelasin ke kita.

[@lufthazka]

sama saya juga masih bingung wkwkwk

[@ritoalit6193]

Selamat malam Bapak Andika, terima kasih atas kontribusi pembelajaran CSS, saya ada 1 pertanyaan perihal Float. di bab 8 ini, Bapak menggunakan 3 buah Box, yang mana box nomer 2 bapak buat float = Left, sehingga box ke-3 ikut naik dan bersembunyi di belakang box ke-2 tetapi mengapa pada bab 9 saat sebuah logo di buat float=left, dan tulisan(content) tidak berada di belakang gambar logo tersebut, seolah olah content Text ini tidak tertutupi oleh Logo, sedangkan di bab 8 kotak ke-3 berada persis di belakang kotak ke 2...

[@rivaldocaga2303]

karena jika elemen setelah float itu teks maka teks itu akan menggangap float itu ada makanya tidak tertutupi logo

[@pepgueidolaefootballmobile]

Setelah nonton video ini. Ngerti bgt.. tp stlh nonton video position dan lain2. Float jd lupa lagi. Hehhe gmn biar inget bgt nempel bgt diotak

[@bayujamil1792]

Kalo bisa tonton vidio nya jangan sekali bro dan banyak banyak coba latihan aja nanti lama lama keinget

[@mutiaraichsan5061]

pak dika saya mau tanya dong.. saya sudah buat seperti yang bapak ajarkan .. cuman saya mau kembangin dikit nih .. gimana cara nya kalo di dalam container ada div lagi baru isi nya kiri tengah dan kanan.. cuman .. kiri tengah dan kanan nya itu meng ikuti div yang didalam containern di yakiri serta kanan nya berupa image.. mohon bantuan nya ya

[@johnivanaldo8566]

Halo bang, dari 2020,bang maaf mau tanya, trs apa bedanya pake float left sama inline-block ya bang?

[@johnivanaldo8566]

@Anak Teknik mantap bang, makasih

[@radenmasaji2617]

Pak sandika itu comtainernya gimana kalo di bikin sama atau sesuai dgn div floatnya

[@mrrobot4048]

pak saya mau ngasih tau saya belajar css ini tapi awalnya kan belajar div itu cuman ada 1 div pas buat website di eps 7 kok ampe ada 2 div pak itu ga dijelasin jadi saya bingung jadinya

[@arifabs7293]

Assalamualaikum bang mau nanya tolong dijawab..pas contoh text wraping kenapa tulisanya bisa disamping gambar tidak menimpa gambar sedangkan pada contoh yang lain pada kotak yg pertama ketika diberi float kotak yang bawahnya hilang(ketutup kotak lain ) tidak di sampingnya.terimakasih semoga rezekinya bertambah

[@adingus88]

Nah ini wajib up

[@dimskuy132]

Pak Dika, float warna hijau saya tidak muncul kenapa ya, padahal sudah sama persis dengan Pak Dika, bingung...

[@Wahyu-wc6yn]

Sengaja Nggak ngeskip iklan,

[@Duda-ke3uz]

2:51 Kenapa saat saya buat teks baru, tampilnya di tengah2 kotak tsb

[@youtraders]

Aku bngung pak dri dlu css ga hafal2 klo program hafalnya cpet kyk c++ python😢 masukan pakk

[@Duda-ke3uz]

4:01 Ketika saya ganti float: right; Posisinya sama ketika saya kasih float:left, tidak berubah

[@aouxswantoro5432]

Biasanya karena salah seleksi ato browser gak nanggapi

[@rezapermata6885]

pa ko float aku tampilan hasilnya ga sesuai terus ya pa pdhal udh sama semua kaya punya bapa . yang wrapping gambar nya ga pindah, yang gallery sm kolom si kotaknya ga masuk kena .container nya

[@ibnualkautsar8900]

di bagian box galeri tadi kotaknya tersusun berurutankan, kalo kita membuatnya urutan angkanya per row gimana ya pa?

[@dwiwi8326]

dimenit 7:30 saya membuat img nya float left tetapi saya ingin teksnya tetap di bawah img. itu gimana solusinya ya?

[@darmanhakim4203]

Pak dika, penggunaan float menganggap element tersebut keluar dari parentnya, tapi mengapa paragraf masih menganggap element yg telah diberi float masih tetap ada? contoh pada paragraf mengelilingi gambar, mengapa tidak paragrafnya berada di belakang gambar?

[@irfankurniawanS]

Wkwkwk saya juga pikir hal yang sama. Tapi saya jadikan patokan saja karena sudah sifat elemennya begitu

[@muhammadwafa7786]

pak, kapan kita bisa pakai float dan kapan kita pake disyplay:flex? saya pernah bikin kayak gitu pakai flex

[@sandhikagalihWPU]

flex bisa melakukan apa yang float bisa, bahkan lebih keren lagi.. tapi flexbox belum disupport oleh semua browser

[@muhammadwafa7786]

terima kasih pak, sangat membantu

[@HaryKurniawan]

pak pada saat kita bikin text wrapping, kenapa textnya tidak berada di belakang image pada saat image diberikan properti float left ya pak seperti pada saat kita berikan property float pada kotak hijau di pertama?

[@HaryKurniawan]

pak lalu sy melakukan perocbaan pertama (3 kotak salmon, hijau, biru), saya isi kotaknya dengan text. apabila saya float left salah satu kotaknya, isi textnya kenapa ketinggalan ya pak? terima kasih

[@ATOKChannel]

pak sandhika itu logonya yang bagian image galery ukurannya berapa punya bapak? pengen tau lebar dan tingginya pak hehehe

[@sandhikagalihWPU]

logo webprogrammingunpas? 261px x 235px

[@thamzhu]

Mohon tanya pak dika, sy lihat sudah ada beberapa yg nanya cm blm ada jwbn lgsg dr pak dika, mohon pencerahan mengenai text wrapping saat elemen img (inline elemen) diberi float left, dan teks berada disamping gambar bukan dibawah gambar, seperti contoh diawal video. Makasih sblmnya pak...

[@arifabs7293]

Up up

[@maulanayusup3915]

om mau tanya lgi, kalo soal footernya gmn om..? setelah pake float .

[@sandhikagalihWPU]

itu harus dikasih clear dulu.. penjelasannya ada di video setelah ini.. ayo diselesaikan dulu nontonnya sampai latihan ke 3.. :)

[@wandiesyachfutra5817]

Pak Dhika.. saya mau tanya, saya menambahkan kotak menjadi 5 ( kanan, tengah,kiri, atas dan bawah) untuk mengatur posisi 5 kotak ke tengah menggunakan apa yaa pak? terima kasih

[@sandhikagalihWPU]

Sepertinya harus pakai css grid, coba cek aja playlistnya di channel ini

[@Irfan-mh7ev]

gambar nya gak muncul masalahnya dmna ya ? mau coba float text wrapping tpi ga muncul2

[@thoriqulfalahi2180]

yang bagian gambar dan text, kenapa saat gambar berubah menjadi float teksnya ada disamping gambar? bukannya gambar akan terangkat ke atas lalu menutupi teks ya?.

[@b4r4room]

pertanyaan yang sama.. mudah2an dijawab

[@arifabs7293]

Sama nunggu jawaban🙏

[@mantapjiwa....229]

Maaf pak klo style3 itu buat apa ya pak🙏

[@Mieayamracer]

Lagi belajar ini, percobaan ke 3 untuk bikin float kiri tengah sm kanannya bisa, tp containernya hilang, ada yg tau kenapa?

[@ahmadzidaneabiyyah]

Yng Multi Column Layout kok punyaku ga bisa sejajar ya padahal udah sama

[@amirulfaisal9040]

cara nginstall plugin enmed gimana ya pak? respon dong plis :(

[@masjaka9659]

kan normal flow di seblah kiri kalau semua element nya ber jajar ke bawah di sebalah kanan seperti apa ya bang ?

[@animetiles6741]

menurut saya sih kita harus akalin di htmlnya biar kotaknya berurut ini hanya menurut pendapat saya,, sorry kalo sala:)

[@sangmaster21]

pak tolong dong saya dalam kesulitan nih tugas akhir submision devoding membuat website menggunakan semantic element seperti , , , dan yang lainnya. Gunakan juga teknik float atau flexbox saya gak bisa nih

[@adhnanwibowo8509]

Kak kenapa ya saat img di float: left tulisan pindah ke kiri gambar benar, tapi garisnya ikut kecil sesuai tulisan nya bukan ikut sesuai gambarnya ??

[@frangkymulersimanjuntak3120]

gmna kak apakah udah menemukan solusi nya? saya ngestalk jg sama seperti kk

[@galangnusantara4142]

Caranya supaya kolom bisa terpisah gimana bang?

[@aerob4611]

kalau container tidak menganggap ada kotak, terus kenapa kotakny gk keluar dari container kiri dan kananny? harusnya klo gk dianggap dia akan keluar dari container dan berada di pojok kiri atau kanan bukan kiri dan kanan container

[@adingus88]

float kan di kiri/kanan element parent yak

[@ahmadzaki2500]

Pak maaf ini contoh kegunaan float seperti apa di dalam website? Terimakasih

[@irfankurniawanS]

Mengatur tata letak website misalkan main-content di kiri nah di sebelahnya ada artikel² lain. Mirip website detik.com

[@ahmadzaki2500]

@@irfankurniawanS oke terimakasih suhu

[@stevenmarunduri389]

Bang Gua mau kursus HTML CSS JavaScript yang murah tapi bagus dimana ya bang (jakbar) kalo ada

[@YUTA_999]

8 orang yang dislike, gak ada ahlak...

[@febrianfalih3035]

Pak saya mau nnya itu arti meta dataa apa ya gunanya?

[@araryaarkaanugraha3797]

Pak ada yang HTML5 itu sama atau gimana kalau beda buatin tutorialnya pak

[@aonekochan420]

Keseluruhannya hampir sama saja, itu hanya update-an dari versi sebelumnya.

[@newdehan3889]

Klo floatnya di ganti display inline gmn menurut bapak untuk multi column ?

[@fadhlurrahman2588]

Berarti tidak bisa diatur tinggi dan lebar nya.... karena sesuai kontent di dalamnya

[@MrLook19]

@@fadhlurrahman2588 inline block bisa kok....

[@MrLook19]

inline-block maksudnya, hanya saja gak bisa bolak balik (lef dan right) nanti gambar kotak-kotaknya

[@sobat_official1525]

pake apk apa bang

[@chandesu1]

lebih baik pakai box-sizing atau pakai cara menghitung lebarnya dan membagi lalu mengurangi? apa box-sizing punya kelemahan misal kalo pakai box-sizing jadi gini gini dan begini ?

[@gibranmaulana5100]

lorem100 tadi install plugin apa ya bg?

[@sandhikagalihWPU]

emmet

[@gibranmaulana5100]

@@sandhikagalihWPU mksh bg, di menu apa ya bg? Blm ketemu jg

[@agampramana6746]

Bang bisa buatkan tutorial java eclipse?