Welcome Message

"The difference between a successful person and others is not a lack of strength,
not a lack of knowledge, but rather a lack in will."
-Vince Lombardi

September 19, 2010

Auto alignment of Multiple Divs (Assigning Multiple Divs using CSS)

A very frequently asked question is how to align Multiple DIV’s using CSS.

 

Here’s how to align multiple DIV’s. For simplicity sake, I will be aligning 10 divs in JSP.

 

<!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 CSS</title>

    <style type="text/css">

    .divOuter{

        display:inline;

        text-align:center;

    }

 

    .divInner1{

        border: 1px solid;

        float:left;

        width:400px;

        height:150px;

        margin-left:20px;

        margin-right:3px;

    }

    </style>

</head>

<body>

<div class='divOuter'>

<%

for (int i=0;i<10;i++){

 %>

    <div class='divInner1'>First DIV<%=i%></div>

<%

} %>

</div>

</body>

</html>

No comments:

Post a Comment

Thank you for your valuable comments.