elliottbenzle
asked on
how do I center left float divs within a div
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
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"> </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> <br />
</span><span class="style5"> 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;"> </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"> </td>
</tr>
<tr>
<td height="20" valign="middle" bgcolor="#DDDDDD"><div class="footertext">Copyright ©
<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
%>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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">kkk
</div>
MD
<div id #center>
<div class="buttonvertical">kkk
</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.
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>
>> 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.
>> some really good diagrams to explain how it works
Indeed. Thanks for posting the link.
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