Skip to content
Aligning DIV columns with CSS

Aligning DIV columns with CSS

PHP Code Snippets > Aligning DIV columns with CSS

by Steve Dawson Web Developer


A simple way to align divs in rows is by using css to present the content to the browser. It is a very simple way to manage your data without the need for tables. To accomplish this we use a mixture of HTML and CSS.

If we use our stylesheet along with <ul> and <li> we can get our data to look like the following.


  • RowID
  • Code
  • Name
  • Email
  • Action


The CSS we use

<style type="text/css">
.data ul {
  display:table-row;
}
.data li
  {
  display: table-cell;
  list-style-type: none;
  vertical-align: middle;
  padding:3px;
  padding-right:20px; 
  list-style-position: inside; 
  border-bottom:1px solid #ccc;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 14px;
  
  }
.row-header {
  background-color:#360;
  color:#FFF;
  text-align:center;
  }
.row-content-one {
  background-color:#DBE8DC;
  color:#333;
  text-align:left;
  }
.row-content-two {
  background-color:#fff;
  color:#333;
  text-align:left;
  }
  </style>

The HTML for the DIV we use

<div class="data">
<ul class="row-header">
<li>RowID</li>
<li>Code</li>
<li>Name</li>
<li>Email</li>
<li>Action</li>
</ul>
<ul class="row-content-one">
<li>1</li>
<li>WE4R56T</li>
<li>Bugs Bunny</li>
<li>bugs@bunny.co.uk</li>
<li><a href="#">edit details</a></li>
</ul>
<ul class="row-content-two">
<li>2</li>
<li>VBG67UJ</li>
<li>Harry Potter</li>
<li>harry@potter.co.uk</li>
<li><a href="#">edit details</a></li>
</ul>
<ul class="row-content-one">
<li>3</li>
<li>CDRE54T</li>
<li>Daffy Duck</li>
<li>daffy@duck.co.uk</li>
<li><a href="#">edit details</a></li>
</ul>
<ul class="row-content-two">
<li>4</li>
<li>KL98PM</li>
<li>Tom Jerry</li>
<li>tom@jerry.co.uk</li>
<li><a href="#">edit details</a></li>
</ul>
</div>

Free Quote available for any custom PHP and Database Software, Contact Steve Dawson Today