Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Tidak bisa menampilkan box berdampingan dengan box lainnya.
Saya sudah menambahkan kodingan display : inline-block pada css di id box article dan id box side, bahkan saya sudah mengecilkan ukuran box keduanya tapi hasilnya masih atas bawah.
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <title> Layout Elemen dan Box </title> </head> <style>
, / selector universal untuk mengatur margin dan padding default 0 */ html { margin: 0; padding: 0; } #boxj { background-color: blue; width: 1280px; height: 100px; text-align: center; color: white;
}
#boxarticle { background-color: yellow; width: 90px; height: 90px; border-color: green; border-style: solid; border-width: 4px; overflow-y: scroll; display: inline-block; vertical-align: top; margin-top: 5px;
}
#boxside { background-color: orange; width: 90px; height: 90px; border-color: gold; border-style: solid; border-width: 4px; display: inline-block; vertical-align: top; overflow-y: scroll; margin-top: 10px; justify-content: center; }
#footer { background-color: darkgray; margin-top: 10px; } </style> <body> <main> <div> <header> <h1 id="boxj"> Jasa sewa laptop kantor, perusahaan, dan event </h1> </div> </header>
<article> <div id="boxarticle"> <h1> Inilah daftar perlengkapan event yang wajib ada, Catat </h1> <p> Menyelenggarakan suatu event tentunya mengharuskan anda menyiapkan banyak hal. Saat berbicara tentang penyelenggaraan event, tentunya penting untuk memiliki manajemen operasional yang baik. Jika tidak, event tidak akan berjalan mulus seperti yang diharapkan </p> <p> Oleh karena itu, persiapan yang matang harus dilakukan agar setiap aspek acara bisa berjalan sesuai rencana. Berikut ini adalah daftar perlengkapan event yang harus anda persiapkan jauh-jauh hari demi kelancaran event perusahaan. </p> <ol> <li> laptop atau komputer </li> <li> tenda dan kanopi </li> <li> proyektor dan layar </li> <li> meja dan kursi </li> <li> sound dan lighting </li> <li> radio walkie talkie </li> <li> dekorasi dan backdrop </li> <li> peralatan keamanan </li> </ol> </div> </article>
<aside> <div id="boxside">
<h3> Satu Solusi Untuk Semua Kebutuhan IT </h3>
<p> Akses ke layanan dan perangkat IT lebih mudah dan aman bersama Erwin. Tanpa biaya tambahan dan tanpa minimum sewa. </p>
<a href="login facebook.html"> Minta Penawaran </a>
</aside> </main> <div id="footer"> <footer> © 2025 EWP. Dibuat di Jakarta 😁 </footer> </div>
</body> </html>
2 Jawaban:
Halo Erwin, agak susah lihat kodenya, kalau sulit merapikan kodenya di sini, bisa coba dishare di Codepen.io lalu share linknya ke sini. Salam!
Tanggapan
https://codepen.io/erwin-putra/pen/RNPmmyd
Silahkan edit pertanyaan kamu ya, biar orang yang lain baca bisa langsung lihat URL nya, agak susah baca kodenya soalnya
- Saat ini "article" dan "aside" kamu membungkus masing masing box nya,
- Masing masing tag tersebut bersifat block, makanya kamu masih melihat mereka di masing masing baris
Yang bisa kamu lakukan: berikan id khusus pada article dan asidenya, lalu distyle menjadi inline