center to divs side by side

jasonpc1 · 08-31-2010, 11:20 AM

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

Code:

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

HTML

Code:

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

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, 11:30 AM

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" />
<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

  should not be used for "spacing"

jasonpc1 · 08-31-2010, 08: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, 07: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.