Dalam penggunaannya tag <div></div> tidak bisa sejajar. Supaya bisa sejajar maka harus kita atur css-nya. Cara pengaturannya adalah sebagai berikut. Buat tiga division dengan class masing-masing container sebagai div terluar. Kemudian div dengan class kolom1 dan kolom2 berada di dalam container. Kemudian setting css-nya pada kolom1= float:left; kemudian pada kolom2 = float:right.
untuk kode lengkapnya sebagai berikut :
<html>
<head>
<title>Ganti Halaman</title>
<style>
.container {
height:100px;
width:100%;
}
.kolom1 {
height:100px;
width:20%;
background-color:grey;
float:left;
}
.kolom2 {
height:100px;
width:80%;
<head>
<title>Ganti Halaman</title>
<style>
.container {
height:100px;
width:100%;
}
.kolom1 {
height:100px;
width:20%;
background-color:grey;
float:left;
}
.kolom2 {
height:100px;
width:80%;
background-color:red;
float:right;
}
</style>
</head>
<body>
<div class="container">
<div class="kolom1">
<ul>
<li><a href="#">Handphone</a></li>
<li><a href="#">Komputer</a></li>
<li><a href="#">Kamera</a></li>
<li><a href="#">Elektronik</a></li>
</ul>
</div>
<div class="kolom2">
<ul>
<li><a href="#">Pakaian</a></li>
<li><a href="#">Sepatu</a></li>
<li><a href="#">Baju</a></li>
<li><a href="#">Kaos</a></li>
</ul>
</div>
</div>
</body>
</html>
float:right;
}
</style>
</head>
<body>
<div class="container">
<div class="kolom1">
<ul>
<li><a href="#">Handphone</a></li>
<li><a href="#">Komputer</a></li>
<li><a href="#">Kamera</a></li>
<li><a href="#">Elektronik</a></li>
</ul>
</div>
<div class="kolom2">
<ul>
<li><a href="#">Pakaian</a></li>
<li><a href="#">Sepatu</a></li>
<li><a href="#">Baju</a></li>
<li><a href="#">Kaos</a></li>
</ul>
</div>
</div>
</body>
</html>
Selamat mencoba.
Tidak ada komentar:
Posting Komentar