Monday, August 17, 2009

Aligning Multiple DIV’s using CSS

A very frequently asked question is how to align Multiple DIV’s using CSS. I had recently done a post on Aligning two div's next to each other using CSS

Here’s how to align multiple DIV’s. For simplicity sake, I will aligning 3 DIV’s

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">
<
head>
<
title>Aligning Multiple DIV's using CSStitle>
<
style type="text/css">
.divOuter{
display:inline;
text-align:center;
}

.divInner1, .divInner2, .divInner3{
border: 1px solid;
float:left;
width:150px;
height:150px;
margin-left:3px;
margin-right:3px;
}
style>
head>
<
body>
<
div class='divOuter'>
<
div class='divInner1'>First DIVdiv>
<
div class='divInner2'>Second DIVdiv>
<
div class='divInner3'>Third DIVdiv>
div>
body>
html>


OUTPUT

image

No comments:

Post a Comment