masalah di membuat website portofolio bagian keempat

ini kenapa ukuran tinggi karya box kanan dengan karya box kiri tidak sama padahal scriptnya udah benar. ini script cssnya

 /* bagian setiap folio */

.panah_box{
	width: 60px; height: 60px; line-height: 60px;
	color: white; background-color: #0074b9;
	text-align: center; font-size: 30px;
	margin-top: 180px;
}

#karya_box{
	width: 800px;
	margin: 0 20px;
}

.panah_box, #karya_box, #karya_box_kr, #karya_box_knn{
	float: left;
}

#karya_box_knn{
	width: 500px; height: 350px;
}

#karya_box_kr{
	width: 280px;
	height: 320px;
	background-color: #0074b9;
	color: white;
	padding: 30px 10px 0px 10px;
}

#karya_box_kr h3{
	font-size: 30px;
	margin-bottom: 30px;
}

#karya_box_kr .deskripsi{
	font-size: 18px;
}

#karya_lain{
	width: 450px; margin: 50px auto 0 auto;
}

#karya_lain img{
	display: block;
	float: left;
	width: 140px;
	margin-left: 10px;
}

dan ini yg html

 <!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>Portofolio Sekolah Koding</title>
</head>
<body>

	<div style="padding-top: 20px;"></div>

	<div id="header">
		<img src="asset/smkgending.png"	id="logo" alt="">
		<div id="menu">
			<div class="konten">
				<a href="#pertama" class="kolom_3 ">Hallo</a>
				<a href="#kedua" class="kolom_3 kolom_3_tengah">Karya</a>
				<a href="#ketiga" class="kolom_3 ">Kontak</a>
			</div>
		</div>
	</div>

	<div style="margin-top: 50px;"></div>

	<div class="konten">


		<div class="panah_box"> < </div>

		<div id="karya_box">

			<div id="karya_box_kr">
				<h3>Judul Karya</h3>
				<p class="deskripsi">Ini adalah contoh deskripsi yang lebih panjang lagi dan ribet</p>
			</div>

			<div id="karya_box_knn">
				<img src="asset/rumput.jpg">
			</div>

		</div>

		<div class="panah_box"> > </div>

		<div class="clear"></div>

			<div id="karya_lain">
				<img src="asset/rumput.jpg">
				<img src="asset/rumput.jpg">
				<img src="asset/rumput.jpg">
			</div>
	</div>
	<div class="clear"></div>

	<div id="footer">
			<p>© SekolahKoding 2015 </p>
		</div>

</body>
</html>

makasih sebelumx jika saya kasih bakcground malah muncul bakcground dibawahnya,,,bingung banget tolong dong master

css

@jamalludin

114 Kontribusi 17 Poin

Diperbarui 7 tahun yang lalu

3 Jawaban:

akhirnya terselaikan juga. ternyata ditambah img lagi

 #karya_box_knn img{
	width: 500px; height: 350px;
}

ini buktinya tapi disekolah koding tanpa ditambah img kok bisa ya ,,apa ini cuman jebakan saja ,atau gimana sih ???please jawab dong

@jamalludin

114 Kontribusi 17 Poin

Dipost 7 tahun yang lalu

Ini bisa disebabkan ukuran imagenya yang beda. Kalau agan tidak kasi value pada height img maka otomatis value heightnya auto. Yg artinya perbandingan antara width dan heightnya mengikuti aspec ratio dari img bersangkutan. Makanya kenapa agan bisa lihat background, di belakang img. Ada 2 caranya. 1. Ya tentukan width dan height img sesuai div pembungkusnya seperti yg agan lakukan. Atau, edit gambar pake photoshop lalu sesuaikan width dan heightnya.

@onirusama

265 Kontribusi 184 Poin

Dipost 7 tahun yang lalu

iya saya juga brpikir bgtu hehehe,tapi mkasih infonya gan

@jamalludin

114 Kontribusi 17 Poin

Dipost 7 tahun yang lalu

Kelas Premium! Belajar bikin website dari nol sekarang

masalah di membuat website portofolio bagian keempat

Kelas Premium!
Belajar bikin website dari nol sekarang