Welcome to WebmasterWorld Guest from 184.73.3.107

Forum Moderators: not2easy

Div's Center Alignment Issue

   
4:57 am on Jun 30, 2008 (gmt 0)

5+ Year Member



Hi All,

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

5:01 am on Jun 30, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



If you float it, there's not really going to be centering it again.

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.

5:07 am on Jun 30, 2008 (gmt 0)

5+ Year Member



thanks swa66 for you prompt reply..

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

9:53 am on Jun 30, 2008 (gmt 0)

5+ Year Member



I did an example for another post on centering float. It only works if you know what the width of the floated items is. Center-align floats [webmasterworld.com]
4:50 am on Jul 1, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I'm a bit stressed for time, but to get you going:

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...]

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month