...

View Full Version : center to divs side by side



jasonpc1
08-31-2010, 12:20 PM
I have tried but can not seem to get this to center the divs.

Can anyone please tell me how I do this correctly.

CSS


.titles { float: left; font-size: 18px; font-weight: bold; text-align: center; width: 203px; background:url(images/titlesbg1.gif) no-repeat bottom center; }


HTML


<div align="center">
<div class="titles"><a href="?ac=q&amp;phpsession=">left hyperlink</a></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="titles"><a href="?ac=q&amp;ft=a&amp;phpsession=">right hyperlink</a></div>
</div>



and in case the DOCTYPE makes a difference, the top part of my HTML code.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

met
08-31-2010, 12:30 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.titles {
float: left;
font-size: 18px;
font-weight: bold;
text-align: center;
width: 203px;
background:url(images/titlesbg1.gif) no-repeat bottom center;
background:red;
}

.titles.first { margin-right:5px; }

.center {
margin:auto;
width:411px;
}

/*
if you want a space between titles,
adjust the margin and .center width accordingly

link1 + gap + link2 = total width
203px + 5px + 203px = 411px (.center width)


total width = margins + border + padding + element width
box model
*/

</style>
</head>
<body>
<div class="center">
<div class="titles first"><a href="?ac=q&amp;phpsession=">left hyperlink</a></div>
<div class="titles"><a href="?ac=q&amp;ft=a&amp;phpsession=">right hyperlink</a></div>
</div>
</body>
</html>


align=center is deprecated

&nbsp; should not be used for "spacing"

jasonpc1
08-31-2010, 09:05 PM
hey thank you your reply..

but this only seems to work for just two hyperlinks.

i have different pages that have different number of links, 2 to 7 so far.

how can this be done so it centers all of the links in that row?

none of the links will be so long that it makes it drop to the next line.

Major Payne
09-01-2010, 08:39 AM
Can't get elements to center if floated or using absolute positioning. To center the main container, you MUST provide a width less than 100% and then you can use the CSS property:

margin: 0 auto;

Include a height if needed.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum