Forum Moderators: not2easy
recently i stuck with a very funny problem for which i tried couples of tricks but failed so here the problem is:
I have to show the three div boxes sit next to each other but it should be Center Align.
Number div box can be reducable up to one but not exceeds more than three..
below is the sample code of issue:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.outsideDiv{
text-align:center;
background-color:#CCCCCC;
width:100%;
}.insideDiv{
background-color:#666666;
border:1px solid black;
width:275px;
height:225px;
float:left;
text-align:left;
}
ul.alignment{
text-align:center;
margin:0 auto;
}
</style>
</head>
<body>
<div class="outsideDiv">
<ul class="alignment">
<li class="insideDiv">
<a href="#">lorem ipsum</a>
<h4>lorem ipsum lorem ipsum</h4>
<span>lorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsum</span>
</li>
<li class="insideDiv">
<a href="#">lorem ipsum</a>
<h4>lorem ipsum lorem ipsum</h4>
<span>lorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsum</span>
</li>
<li class="insideDiv">
<a href="#">lorem ipsum</a>
<h4>lorem ipsum lorem ipsum</h4>
<span>lorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsum</span>
</li>
</ul>
</div>
</body>
</html>
any pointer or help for the same is higly appriciable..
Thanks,
Tricker
You could do absolute positioning (position it at 50% and go half the width back with a negative margin to get a centered one, and more or less to have two or three in a row)
You could also use display:inline-block (search on here for how to use that) and center the text on a parent.
I tried this display inline its not working for me..
so can you pls tell me any other workaround for this by using the code above..
Thanks,
Tricker
display-inline needs trickery to work, and there might be even more needed
See (newest first...):
[webmasterworld.com...]
and
[webmasterworld.com...]
and
[webmasterworld.com...]
Now the other option is to use absolute positioning.
To do it with e.g. a image 100px wide:
display:block;
position:absolute;
left:50%;
margin-left:-50px;
width:100px;
To make it work with 2 or 3 next to each other, you'd need to target them individually and change the margin-left appropriately or work on a containing box or so.
Note that I'm not resetting the top in the example above, and that you somehow need to create space to let the absolutely positioned elements sit in (they otherwise go on top of the rest)
See also: (where I did it a bit more tutorial style)
[webmasterworld.com...]
