We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

how do I center left float divs within a div

elliottbenzle
on
Medium Priority
1,828 Views
Last Modified: 2012-05-06
I have a series of div tags whach are all set to float:left. I would like these tags as a group to be aligned in the center of the page. I have placed them all in a div align="center" but this doesn't seem to help. Can some one help me out. Below is my code, thanks.

here is the page if you need it, the buttons that I want to center align are at the bottom:

http://robinbenzle.com/indextemp2.asp


Divs:
 
 <div align="center">
   
        <div class="buttonleft"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About Robin','','images/buttonaboutrobinon.jpg',1)"><img src="images/buttonaboutrobinoff.jpg" name="About Robin" width="117" height="20" border="0" id="About Robin" /></a></div>
    <div class="buttonmiddle"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Subscribe','','images/buttonsubscribeon.jpg',1)"><img src="images/buttonsubscribeoff.jpg" name="Subscribe" width="148" height="20" border="0" id="Subscribe" /></a></div>
     <div class="buttonmiddle"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Advertise','','images/buttonadvertiseon.jpg',1)"><img src="images/buttonadvertiseoff.jpg" name="Advertise" width="119" height="20" border="0" id="Advertise" /></a></div>
     <div class="buttonright"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/buttoncontacton.jpg',1)"><img src="images/buttoncontactoff.jpg" name="contact" width="69" height="20" border="0" id="contact" /></a></div>
   
   </div>
 
 
CSS:
 
.buttonleft {
	margin-top: 15px;
	margin-right: 20px;
	float: left;
}
.buttonmiddle {
	margin-top: 15px;
	margin-right: 20px;
	margin-left: 20px;
	float: left;
}
.buttonright {
	margin-top: 15px;
	margin-left: 20px;
	float: left;
}
 
Entire page:
 
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!--#include file="Connections/robinbenzle.asp" -->
<!--#include file="arch_del.asp" -->
<%
Dim rstravelpic
Dim rstravelpic_cmd
Dim rstravelpic_numRows
 
Set rstravelpic_cmd = Server.CreateObject ("ADODB.Command")
rstravelpic_cmd.ActiveConnection = MM_robinbenzle_STRING
rstravelpic_cmd.CommandText = "SELECT * FROM travelpic" 
rstravelpic_cmd.Prepared = true
 
Set rstravelpic = rstravelpic_cmd.Execute
rstravelpic_numRows = 0
%>
<%
Dim rsmainvideo
Dim rsmainvideo_cmd
Dim rsmainvideo_numRows
 
Set rsmainvideo_cmd = Server.CreateObject ("ADODB.Command")
rsmainvideo_cmd.ActiveConnection = MM_robinbenzle_STRING
rsmainvideo_cmd.CommandText = "SELECT * FROM weekvideo ORDER BY displaydate ASC" 
rsmainvideo_cmd.Prepared = true
 
Set rsmainvideo = rsmainvideo_cmd.Execute
rsmainvideo_numRows = 0
%>
<%
Dim foodbite
Dim foodbite_cmd
Dim foodbite_numRows
 
Set foodbite_cmd = Server.CreateObject ("ADODB.Command")
foodbite_cmd.ActiveConnection = MM_robinbenzle_STRING
foodbite_cmd.CommandText = "SELECT * FROM foodbite" 
foodbite_cmd.Prepared = true
 
Set foodbite = foodbite_cmd.Execute
foodbite_numRows = 0
%>
 
<!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">
<html>
<head>
	<title>Robin Benzle food and travel</title>
	<link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
    <style type="text/css">
<!--
.garagesale {
	width: 231px;
	margin-top: 20px;
	background-image: url(images/storefront.jpg);
	background-repeat: no-repeat;
	height: 190px;
	clear: both;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-left: 5px;
}
.style4 {	font-size: 12px;
	font-weight: bold;
}
.style5 {	font-size: 10px
}
.style8 {	padding-top: 5px;
	padding-right: 8px;
	padding-bottom: 5px;
	padding-left: 8px;
	font-size: 12px;
}
.travellinks {
	margin-right: 0px;
	margin-left: 0px;
	margin-top: 0px;
	font-size: 12px;
	font-weight: bold;
	padding-right: 0px;
	width: 240px;
}
.travelpicday {
	font-size: 14px;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 5px;
	padding-left: 15px;
	padding-right: 15px;
	width: 210px;
}
.travelpicpadding {
	padding-top: 10px;
	padding-bottom: 10px;
	width: 220px;
}
.style9 {
	font-size: 20px
}
.break {	clear: both;
}
.chowlinks {	width: 310px;
	margin-right: 0px;
	margin-left: 20px;
	margin-top: 15px;
	font-size: 12px;
	font-weight: bold;
	margin-bottom: 20px;
}
.chowsubscribe {	color: #999999;
	float: left;
	margin-top: 21px;
	margin-left: 10px;
	font-size: 10px;
}
.chowtext {
	margin-top: 10px;
	margin-left: 25px;
	font-weight: bold;
	font-size: 20px;
	float: left;
}
.chowtime {
	width: 495px;
	padding-right: 0px;
	margin-top: 2px;
	background-repeat: repeat;
	background-image: url(images/chowtimeleavesgrad.jpg);
	margin-left: 5px;
}
.chowvideo {	width: 480px;
	margin: 0px;
	padding-top: 15px;
	text-align: center;
}
.style6 {	width: 305px;
	padding-right: 130px;
	padding-left: 45px;
	font-size: 12px;
	padding-top: 15px;
}
.foodbite {
	margin-left: 15px;
	margin-top: 10px;
	margin-right: 10px;
	background-image: url(images/foodbitebg.jpg);
	padding-bottom: 10px;
	margin-bottom: 10px;
	height: 220px;
	padding-top: 1px;
	background-repeat: no-repeat;
	background-position: center center;
}
.foodbitebody {
	margin-top: 20px;
	margin-left: 60px;
	font-size: 14px;
	margin-right: 20px;
}
.foodbiteheader {
	margin-left: 15px;
	padding-top: 0px;
	font-size: 14px;
	font-weight: bold;
	color: #333333;
	margin-top: 90px;
	padding-left: 70px;
	margin-bottom: 0px;
	padding-right: 140px;
}
.style12 {	font-size: 12px
}
.style13 {font-size: 14px}
.style11 {font-family: Arial, Helvetica, sans-serif}
.style14 {color: #333333}
-->
    </style>
    <link href="robincss.css" rel="stylesheet" type="text/css" />
</head>
 
<body bgcolor="#ffffff" leftmargin=0 topmargin=0 marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/buttoncommentsquestions.jpg','images/buttonhome.jpg','images/buttonrecipe.jpg','images/buttonvideorecipe.jpg','images/buttonfoodarticles.jpg','images/buttontravelvideos.jpg','images/buttontravelarticles.jpg')">
 
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
  <tr>
	<td width="50%" background="images/bg.gif"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
	<td valign="bottom" background="images/bg_left.gif"><img src="images/bg_left.gif" alt="" width="17" height="16" border="0"></td>
	<td valign="top">
      <table width="950" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="bottom" align="right" background="images/header.jpg" width="950" height="254">
          
                        <div class="searchvertical">
                <form method="get" action="http://www.google.com/custom"><input type="submit" name="btnG" value="Search" />
      <input type="text" name="q" size="16" maxlength="255" value="" />
      <input type="hidden" name="sitesearch" value="http://www.robinbenzle.com/" />
    </form>
              </div>
          
          </td>
        </tr>
        <tr>
          <td valign="top">
          
            <div align="center">
              <div class="buttonvertical"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','images/buttonhome.jpg',1)"><img src="images/buttonhomelt.jpg" name="home" width="89" height="20" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('recipe archive','','images/buttonrecipe.jpg',1)"><img src="images/buttonrecipelt.jpg" name="recipe archive" width="108" height="20" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Chow Time Videos','','images/buttonvideorecipe.jpg',1)"><img src="images/buttonvideorecipelt.jpg" name="Chow Time Videos" width="138" height="20" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('food articles','','images/buttonfoodarticles.jpg',1)"><img src="images/buttonfoodarticleslt.jpg" name="food articles" width="107" height="20" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('travel videos','','images/buttontravelvideos.jpg',1)"><img src="images/buttontravelvideoslt.jpg" name="travel videos" width="109" height="20" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('travel articles','','images/buttontravelarticles.jpg',1)"><img src="images/buttontravelarticleslt.jpg" name="travel articles" width="115" height="20" border="0"></a>            <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('comments and questions','','images/buttoncommentsquestions.jpg',1)"><img src="images/buttoncommentsquestionslt.jpg" name="comments and questions" width="177" height="20" border="0"></a></div> 
            </div>
 
          
            
              </td>
        </tr>
      </table>
      <table border="0" cellpadding="0" cellspacing="0" width="950">
 
<tr>
	<td height="40" align="center" width="241"><img src="images/traveltitle.jpg" width="231" height="40"></td>
	<td align="center" width="8">&nbsp;</td>
	<td height="40" align="center" width="504"><div align="left"><img src="images/foodtitle.jpg" width="347" height="40"></div></td>
	<td width="197" height="40" align="center"><img src="images/sponsortitle.jpg" width="162" height="40"></td>
</tr>
<tr>
	<td colspan="4" height="11"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="950">
<tr valign="top">
	<td width="255">
<div class="travelpadding">
  <table width="258" height="581" border="0" bgcolor="#FFFFFF">
    <tr>
      <td width="252" height="166" valign="top" background="images/traveltime.jpg"  style="background-repeat:no-repeat"><div class="travelpicday">
        <div align="center" class="style9">Travel Pictures</div>
      </div>
            <div class="holder" align="center">
              <% 
' Moving to random record - Steven Jones' Extension
If Not(rstravelpic.bof and rstravelpic.eof) Then
  ' reset the cursor to the beginning
  If (rstravelpic.CursorType > 0) Then
    rstravelpic.MoveFirst
  Else
    rstravelpic.Requery
  End If
  
  rstravelpic_totalrn = -1
  rstravelpic_totalrn = rstravelpic.RecordCount ' ony works on some recordsets, but much faster
  If (rstravelpic_totalrn = -1) Then ' and if it didn't work, we still have to count the records.
 
    ' count the total records by iterating through the recordset
    rstravelpic_totalrn=0
    While (Not rstravelpic.EOF)
      rstravelpic_totalrn = rstravelpic_totalrn + 1
      rstravelpic.MoveNext
    Wend
 
    ' reset the cursor to the beginning
    If (rstravelpic.CursorType > 0) Then
      rstravelpic.MoveFirst
    Else
      rstravelpic.Requery
    End If
	
  End If
 
' now do final adjustments, and move to the random record  
rstravelpic_totalrn = rstravelpic_totalrn - 1
If rstravelpic_totalrn > 0 Then
Randomize
rstravelpic.Move Int((rstravelpic_totalrn + 1) * Rnd)
End If 
End If
' all done; you should always check for an empty recordset before displaying data
%>
              <div class="travelpicpadding"><img src="<%=(rstravelpic.Fields.Item("picture").Value)%>" alt="travel pic" width="220" /><br />
                </div>
              <div class="travepictext"><span class="style8"><%=(rstravelpic.Fields.Item("textvar").Value)%></span></div>
              <br />
              </div>
          <div class="travellinks">
            <ul>
              <li class="style4"> <a href="travelvideos.asp">Travel Videos</a></li>
                <li class="style4"><a href="travelarticles.asp">Travel Articles</a></li>
                <li><span class="style4"><a href="2009KenyaItinerary.pdf" target="_blank">Come with me to Africa</a>&nbsp;<br />
                  </span><span class="style5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aug. 29 - Sept. 9</span></li>
                <li><span class="style4"><a href="forum/category-view.asp" target="_blank">Comments and Questions?</a><br />
                  </span></li>
              </ul>
          </div></td>
      </tr>
    <tr>
      <td height="212"><div class="garagesale"></div></td>
      </tr>
  </table>
</div></td>
	<td width="505" style="background-position: top; background-repeat: repeat-x;">
<div class="chowtime">
  <div class="chowtext">Chow Time</div>
  <div class="chowsubscribe">every friday</div>
  <div class="break"></div>
  <div class="chowvideo"><%=(rsmainvideo.Fields.Item("youtube").Value)%> </div>
  <br />
  <div class="style6"><%=(rsmainvideo.Fields.Item("vardescription").Value)%></div>
  <div class="chowlinks">
    <ul>
      <li>Print this Weeks Chow Time Recipe<br />
      </li>
      <li><a href="recipevideos.asp">Recipe Video Archive</a><br />
      </li>
      <li><a href="recipearchivecategory.asp">Robin's Recipes</a></li>
      <li><a href="recipearticles.asp">Food Articles</a><br />
      </li>
      <li><a href="forum/category-view.asp" target="_blank">Comments and Questions?</a><br />
      </li>
    </ul>
  </div>
  </div>
<div class="foodbite">
  <div class="foodbiteheader style13"><span class="chowtime">
    <% 
' Moving to random record - Steven Jones' Extension
If Not(foodbite.bof and foodbite.eof) Then
  ' reset the cursor to the beginning
  If (foodbite.CursorType > 0) Then
    foodbite.MoveFirst
  Else
    foodbite.Requery
  End If
  
  foodbite_totalrn = -1
  foodbite_totalrn = foodbite.RecordCount ' ony works on some recordsets, but much faster
  If (foodbite_totalrn = -1) Then ' and if it didn't work, we still have to count the records.
 
    ' count the total records by iterating through the recordset
    foodbite_totalrn=0
    While (Not foodbite.EOF)
      foodbite_totalrn = foodbite_totalrn + 1
      foodbite.MoveNext
    Wend
 
    ' reset the cursor to the beginning
    If (foodbite.CursorType > 0) Then
      foodbite.MoveFirst
    Else
      foodbite.Requery
    End If
	
  End If
 
' now do final adjustments, and move to the random record  
foodbite_totalrn = foodbite_totalrn - 1
If foodbite_totalrn > 0 Then
Randomize
foodbite.Move Int((foodbite_totalrn + 1) * Rnd)
End If 
End If
' all done; you should always check for an empty recordset before displaying data
%>
  </span><%=(foodbite.Fields.Item("title").Value)%></div>
  <div class="foodbitebody style12"><%=(foodbite.Fields.Item("foodbite").Value)%></div>
</div><p style="font-size: 12px;">&nbsp;</p></td>
	<td width="190"><div align="center"><img src="images/px1.gif" width="1" height="1" alt="" border="0">
	  
          <script type="text/javascript"><!--
google_ad_client = "pub-5991804078070605";
/* 160x600, created 2/10/09 */
google_ad_slot = "8395045204";
google_ad_width = 160;
google_ad_height = 600;
//-->
        </script>
          <script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        </script>
	  </div></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="950">
<tr>
	<td><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
</tr>
<tr>
  <td height="25">&nbsp;</td>
</tr>
<tr>
	<td height="20" valign="middle" bgcolor="#DDDDDD"><div class="footertext">Copyright &copy; 
	      <SCRIPT>
<!--
var year=new Date();
year=year.getYear();
if (year<1900) year+=1900;
document.write(year);
//-->
        </SCRIPT> 
	  by Robin Benzle. All Rights Reserved</div></td>
</tr>
<tr>
	<td align="center" height="60">
    
 
   <div align="center">
   
        <div class="buttonleft"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About Robin','','images/buttonaboutrobinon.jpg',1)"><img src="images/buttonaboutrobinoff.jpg" name="About Robin" width="117" height="20" border="0" id="About Robin" /></a></div>
    <div class="buttonmiddle"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Subscribe','','images/buttonsubscribeon.jpg',1)"><img src="images/buttonsubscribeoff.jpg" name="Subscribe" width="148" height="20" border="0" id="Subscribe" /></a></div>
     <div class="buttonmiddle"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Advertise','','images/buttonadvertiseon.jpg',1)"><img src="images/buttonadvertiseoff.jpg" name="Advertise" width="119" height="20" border="0" id="Advertise" /></a></div>
     <div class="buttonright"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/buttoncontacton.jpg',1)"><img src="images/buttoncontactoff.jpg" name="contact" width="69" height="20" border="0" id="contact" /></a></div>
   
   </div>
    
      </td>
	</tr>
</table>
	</td>
	<td valign="bottom" background="images/bg_right.gif"><img src="images/bg_right.gif" alt="" width="17" height="16" border="0"></td>
	<td width="50%" background="images/bg.gif"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
</tr>
</table>
 
</body>
</html>
<%
rstravelpic.Close()
Set rstravelpic = Nothing
%>
<%
rsmainvideo.Close()
Set rsmainvideo = Nothing
%>
<%
foodbite.Close()
Set foodbite = Nothing
%>

Open in new window

Comment
Watch Question

Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009
Commented:

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Commented:
Add a margin and/or padding to these divs so that they will be in the centre of the screen (use % instead of px).

Better still, re-write the page so that the one you want to centre are not floating to the left.

Float is an attribute that should only be used when absolutely needed. Floating every divs to left is not a very good idea
use text-align: center . This will center the div it self. eg #center { text-align: center} - this will affect the DIV itself. BUT you may have to specify text-align: left if you want the text to be align left etc...

<div id #center>
<div class="buttonvertical">kkkkkkk</
</div>

MD
myderrick, did you test your code?  It doesn't look to me like it works, but perhaps I've misunderstood what you meant.

Kravimir's link solves the problem... so don't give me any points for this, but fyi here's another website that presents essentially the same technique with some really good diagrams to explain how it works:  http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
have pasted some sample code below.  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Centering Buttons</title>
<style>
.buttonleft {
	position:relative;
	right:50%;
	margin-top: 15px;
	margin-right: 20px;
	float: left;
}
.buttonmiddle {
	position:relative;
	right:50%;
	margin-top: 15px;
	margin-right: 20px;
	margin-left: 20px;
	float: left;
}
.buttonright {
	position:relative;
	right:50%;
	margin-top: 15px;
	margin-left: 20px;
	float: left;
}
</style>
</head>
<body>
<div style="float:left;position:relative; left:50%;">
  <div class="buttonleft">buttonleft</div>
  <div class="buttonmiddle">buttonmiddle</div>
  <div class="buttonmiddle">buttonmiddle2</div>
  <div class="buttonright">buttonright</div>
</div>
</body>
</html>

Open in new window

David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009

Commented:
>> here's another website that presents essentially the same technique with
>> some really good diagrams to explain how it works

Indeed. Thanks for posting the link.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.