Div based multi-column : div « Tags « HTML / CSS
- HTML / CSS
- Tags
- div
Div based multi-column
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>
<style rel="stylesheet" type="text/css">
.main_part {
float: left;
width: 600px;
margin: 41px 0 0 120px;
}
.block {
width: 120px;
float: left;
margin: 0 0 30px 0
}
.block .title {
font-family: Arial;
font-size: 12px;
color: #02579F;
text-decoration: underline;
font-weight: bold;
margin: 0 0 3px 0
}
.block a {
display: block;
font-size: 10px;
color: #474747;
text-decoration: none
}
</style>
</head>
<body>
<div class="main_part">
<div class="block">
<a href="#" class="title">Arts</a>
<a href="#">Animation</a>
<a href="#">Bodyart</a>
<a href="#">Design</a>
<a href="#">Entertainment</a>
<a href="#">Illustration</a>
<a href="#">Movies</a>
<a href="#">Music</a>
</div>
<div class="block">
<a href="#" class="title">Business</a>
<a href="#">Classifieds</a>
<a href="#">Directories</a>
<a href="#">Employment</a>
<a href="#">Financial Services</a>
<a href="#">Real Estate</a>
<a href="#">Small Business</a>
<a href="#">Trade</a>
</div>
<div class="block">
<a href="#" class="title">Computers</a>
<a href="#">Companies</a>
<a href="#">Computer Science</a>
<a href="#">Consultants</a>
<a href="#">Electronic Books</a>
<a href="#">Multimedia</a>
<a href="#">Open Source</a>
<a href="#">Security</a>
</div>
<div class="block">
<a href="#" class="title">Free</a>
<a href="#">Audio</a>
<a href="#">Games</a>
<a href="#">Graphics</a>
<a href="#">Interface</a>
<a href="#">Security</a>
<a href="#">Software libraries</a>
<a href="#">Web Templates</a>
</div>
<div class="block">
<a href="#" class="title">Games</a>
<a href="#">Board Games</a>
<a href="#">Card games</a>
<a href="#">Computer_Games</a>
<a href="#">Dice</a>
<a href="#">Internet</a>
<a href="#">Roleplaying</a>
<a href="#">Video Games</a>
</div>
<div class="block">
<a href="#" class="title">Health</a>
<a href="#">Animal</a>
<a href="#">Beauty</a>
<a href="#">Dentistry</a>
<a href="#">Medicine</a>
<a href="#">Mental Health</a>
<a href="#">Pharmacy</a>
<a href="#">Surgery</a>
</div>
<div class="block">
<a href="#" class="title">Kids & Teens</a>
<a href="#">Arts</a>
<a href="#">Directories</a>
<a href="#">Entertainment</a>
<a href="#">Health</a>
<a href="#">News</a>
<a href="#">Pre-School</a>
<a href="#">Your Family</a>
</div>
<div class="block">
<a href="#" class="title">News</a>
<a href="#">Alternative</a>
<a href="#">Chats and Forums</a>
<a href="#">Current Events</a>
<a href="#">Media</a>
<a href="#">Online Archives</a>
<a href="#">Politics</a>
<a href="#">Sports</a>
</div>
<div class="block">
<a href="#" class="title">Recreation</a>
<a href="#">Antiques</a>
<a href="#">Audio</a>
<a href="#">Boating</a>
<a href="#">Collecting</a>
<a href="#">Guns</a>
<a href="#">Humor</a>
<a href="#">Photography</a>
</div>
<div class="block">
<a href="#" class="title">Science</a>
<a href="#">Agriculture</a>
<a href="#">Biology</a>
<a href="#">Chemistry</a>
<a href="#">Earth Sciences</a>
<a href="#">Economics</a>
<a href="#">Physics</a>
<a href="#">Technology</a>
</div>
<div class="block">
<a href="#" class="title">Shopping</a>
<a href="#">Autos</a>
<a href="#">Beauty Products</a>
<a href="#">Books</a>
<a href="#">Computers</a>
<a href="#">Flowers</a>
<a href="#">Jewelry</a>
<a href="#">Music</a>
</div>
<div class="block">
<a href="#" class="title">Society</a>
<a href="#">Advice</a>
<a href="#">Disabled</a>
<a href="#">Economics</a>
<a href="#">Future</a>
<a href="#">Holidays</a>
<a href="#">Organizations</a>
<a href="#">Politics</a>
</div>
<div class="block">
<a href="#" class="title">Sports</a>
<a href="#">Airsoft</a>
<a href="#">Badminton</a>
<a href="#">Basketball</a>
<a href="#">Boxing</a>
<a href="#">Football</a>
<a href="#">Hockey</a>
<a href="#">Soccer</a>
</div>
<div class="block">
<a href="#" class="title">WWW</a>
<a href="#">Abuse</a>
<a href="#">Chat</a>
<a href="#">Consultants</a>
<a href="#">Domain Names</a>
<a href="#">Internet Marketing</a>
<a href="#">Programming</a>
<a href="#">Software</a>
</div>
</div>
</body>
</html>
Related examples in the same category