homepage Welcome to WebmasterWorld Guest from 107.20.37.62
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Div's Center Alignment Issue
Tricker




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

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

 

swa66




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

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.

Tricker




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

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

appi2




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

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]

swa66




msg:3687401
 4:50 am on Jul 1, 2008 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved