Photo Gallery in table center(Using Div)

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
http://www.w3.org/TR/html4/strict.dtd”&gt;
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″>
<title>Centered inline-Blocks – Gallery Style Listing</title>
<style type=”text/css” media=”screen”>html, body {padding: 0; margin: 0; border: 0; background: #00f;}
#container {
background: #fff;
margin: 0 150px;
border: 1px solid #f00;
padding: 5px;
text-align: center; /* IE 5.x center */
}

.box {
background: #eee;
margin: 5px;
border: 1px solid #000;

display: -moz-inline-box; /* For FF<3 */
-moz-box-orient: vertical; /* For FF<3 */
display: inline-block; /* IE <8 needs this tripped back to display: inline; to make it work on block elements – see conditional below */
width: 150px; /* now optional */
vertical-align: middle; /* explicitly declare your preference as Moz inline-box auto aligns to top */

text-align: left; /* to left align text within divs when container has been set to center */
}

.box p {margin: 0.5em;}
</style>

<!–[if lt IE 8]>
<style type=”text/css” media=”screen”>
.box {display: inline;} /* this is to make inline-block work on block elements versions <IE8 */
</style>
<![endif]–>

</head>
<body>
<div id=”container”>
<div class=”box”><p>test<br>test.</p></div>
<div class=”box”><p>test</p></div>
<div class=”box”><p>test</p></div>
<div class=”box”><p>test.<br />test.<br>test.<br>test.<br>test.</p></div>
<div class=”box”><p>test</p></div>
<div class=”box”><p>test</p></div>
<div class=”box”><p>test</p></div>
<div class=”box”><p>test</p></div>
<div class=”box”>
<p>You no longer have to have the content in these boxes nested<br>inside a nested block elements with a width = to box width for FF.</p>
<ul>
<li>test list alignment</li>
<li>list alignment</li>
<li>list alignment</li>
</ul>

</div>
</div>
</body>
</html>

Advertisements

Posted on January 13, 2009, in Latest Articles and tagged , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: