Tahun baru, skill baru! 🚀. Masukkan kupon "skill2025" untuk diskon 30% di kelas apa saja

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">

&lt;h3&gt; Satu Solusi Untuk Semua Kebutuhan IT &lt;/h3&gt;
&lt;p&gt; Akses ke layanan dan perangkat IT lebih mudah dan aman bersama Erwin. Tanpa biaya tambahan dan tanpa minimum sewa. &lt;/p&gt;
&lt;a href=&quot;login facebook.html&quot;&gt; Minta Penawaran &lt;/a&gt;

</aside> </main> <div id="footer"> <footer> &copy; 2025 EWP. Dibuat di Jakarta 😁 </footer> </div>

</body> </html>

avatar erwinputra
@erwinputra

3 Kontribusi 0 Poin

Diperbarui 2 minggu yang lalu

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!

avatar hilmanski
@hilmanski

2711 Kontribusi 2140 Poin

Dipost 2 minggu yang lalu

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

avatar hilmanski
@hilmanski

2711 Kontribusi 2140 Poin

Dipost 2 minggu yang lalu

Login untuk ikut Jawaban