[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

how do I center left float divs within a div

Posted on 2009-02-10
5
Medium Priority
?
1,781 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

0
Comment
Question by:elliottbenzle
5 Comments
 
LVL 43

Accepted Solution

by:
David S. earned 2000 total points
ID: 23608258
0
 
LVL 3

Expert Comment

by:ken_thai
ID: 23608262
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
0
 
LVL 13

Expert Comment

by:myderrick
ID: 23609268
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
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 23613188
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

0
 
LVL 43

Expert Comment

by:David S.
ID: 23615554
>> 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.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question