Div based multi-column : div « Tags « HTML / CSS






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 &amp; 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

1.'div' Example
2.DIV color: white;
3.div::before content: "I said, \"Hello, world!\"";
4.div::before color: white;
5.div with id selector
6.Using div as img tag
7.This div stretches across the whole window.
8.div content: "This string is placed inside of all div elements.";
9.Using div to layout table elements
10.Div element
11.Div color: #676767;
12.Div color: red;
13.Div color: #FEF9ED;
14.DIV overflow: hidden;
15.DIV as container
16.Using two Nested DIV to do the layout
17.DIV color: #9D9C6A;
18.DIV color: #505050;
19.Nested div box
20.Default layout for div tags
21.The dialogue div element is aligned vertically and horizontally, no matter what the size of the browser window.
22.div for header and body
23.Grouping Elements Using the div Element
24.Two boxes with div tags
25.HTML divisions
26.Division tag
27.div with id style
28.div with class name
29.div.className (tag.className)
30.div in a div with class name
31.Use DIV as wrapper
32.Click to show or hide DIV section
33.Click to show and hide DIV content (IE only)
34.Block divider
35.'nowrap' is similar to the 'pre' element