Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

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

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    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.

  • #4
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    845
    Thanks
    11
    Thanked 79 Times in 77 Posts
    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☠ ☠


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •