Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 08-31-2010, 11:20 AM   PM User | #1
jasonpc1
Regular Coder

 
Join Date: Apr 2010
Posts: 417
Thanks: 4
Thanked 1 Time in 1 Post
jasonpc1 is on a distinguished road
center to divs side by side

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" />
jasonpc1 is offline   Reply With Quote
Old 08-31-2010, 11:30 AM   PM User | #2
met
Regular Coder

 
Join Date: Oct 2009
Location: United Kingdom
Posts: 728
Thanks: 4
Thanked 119 Times in 119 Posts
met has a little shameless behaviour in the past
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

&nbsp; should not be used for "spacing"

Last edited by met; 08-31-2010 at 11:32 AM..
met is offline   Reply With Quote
Old 08-31-2010, 08:05 PM   PM User | #3
jasonpc1
Regular Coder

 
Join Date: Apr 2010
Posts: 417
Thanks: 4
Thanked 1 Time in 1 Post
jasonpc1 is on a distinguished road
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.
jasonpc1 is offline   Reply With Quote
Old 09-01-2010, 07:39 AM   PM User | #4
Major Payne
Regular Coder

 
Join Date: Aug 2005
Location: MS
Posts: 745
Thanks: 7
Thanked 65 Times in 63 Posts
Major Payne is an unknown quantity at this point
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.
__________________
☠ ☠RON☠ ☠
Major Payne is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 05:36 AM.


Advertisement
Log in to turn off these ads.