Div Troubles

[lichtheman]

I can't get this HTML (DIV) to center along with keeping the footer where it's supposed to be.Please help.

<div id="team_butt" style="float: left; margin-left: 14.7%;">		<p>			<center>				<strong style="font-size: 23px; text-align: center;">Tournament Teams</strong>				<hr />			</center>			<table>				<tr>					<td width="75%" align="center">Team</td>					<td width="25%" align="center">Wins / Losses</td>				</tr>								<tr>					<td>The New Pwn</td>					<td>1/2</td>				</tr>			</table>			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />		</p>	</div>	<div id="team_butt" style="float: right; margin-right: 14.7%;">		<p>			<center>				<strong style="font-size: 23px; text-align: center;">Buttons</strong>				<hr />			</center>			- Make a team<br />			- Edit a team		</p>	</div><div id="footer">	<p>		<center>			©2010 <a href="http://www.theaboveworld.net">The Above World</a>		</center>	</p></div>

		#team_butt {			background: #3f53ee;			width: 34%;			-moz-border-radius: 20px;			-webkit-border-radius: 20px;			border-radius: 20px;			position: inline;			padding: 5px;			margin: 0 auto;		}				#footer {			background: #3f53ee;			-moz-border-radius: 10px;			-webkit-border-radius: 10px;			border-radius: 10px;			padding: 5px;			width: 70%;			margin: 0 auto;		}

[ShadowMage]

For starters, id's have to be unique. You can only use an id once per page.position: inline; is not valid. Perhaps you meant display: inline;?Are you trying to center the two 'team_butt' divs? If so, put them both into a container div with the '#team_butt' styles, like this:

<div id='team_butt_cont'>   <div id='team_butt1'>	  ...   </div>   <div id='team_butt2'>	  ...   </div></div>

#team_butt_cont {   background: #3f53ee;   width: 34%;   -moz-border-radius: 20px;   -webkit-border-radius: 20px;   border-radius: 20px;   /*display: inline;*/ /* See below */   padding: 5px;   margin: 0 auto;}

I commented out the display line because the margin: 0 auto; technique only works on block elements (which divs are by default)Make sure you also remove the inline margin styles on the two 'team_butt' divs.

[thescientist]

I;m sure the others are posting this right now, buta) you should only reference an ID once in a documentb ) take out the inline styles for the "team_butt" div's

[dsonesuk]

To centre floated elements you have to have them contained within a non floated element, with fixed width and then use margin: 0 auto;, also because the inner elements are floated you will have to use overflow: hidden; as well to force the outer container to wrap round the floated elements.second pointer you cannot have to elements with the same id reference name, they must be unique, only class reference names can be used multiple times within a page.

[ShadowMage]

To centre floated elements you have to have them contained within a non floated element...

Oh yeah, I forgot about the floats. But I guess putting them in a container like I suggested above will take care of that issue. Just make sure to give that container overflow: auto or overflow: hidden like dsonesuk said.

[jeffman]

I would like to congratulate the panel for observing that ID's must be unique. Wouldn't it be kewl if Bristol Palin could be our next contestant?Coding with the Stars . . .I can totally see this.

[lichtheman]

Thank you guys for the help.And yes, I did mean display: inline.This is how it looks now:

<div id="team_butt_cont">	<div id="team_butt1">		<p>			<center>				<strong style="font-size: 23px; text-align: center;">Tournament Teams</strong>				<hr />			</center>			<table>				<tr>					<td width="75%" align="center">Team</td>					<td width="25%" align="center">Wins / Losses</td>				</tr>								<tr>					<td>The New Pwn</td>					<td>1/2</td>				</tr>			</table>			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />			- Onclick team -> another page with members, number tourney won, editable with password (add new members, delete)<br />		</p>	</div>	<div id="team_butt2">		<p>			<center>				<strong style="font-size: 23px; text-align: center;">Buttons</strong>				<hr />			</center>			- Make a team<br />			- Edit a team		</p>	</div></div><br /><div id="footer">	<p>		<center>			©2010 <a href="http://www.theaboveworld.net">The Above World</a>		</center>	</p></div>

		#team_butt_cont {			overflow: hidden;			width: 70%;			margin: 0 auto;		}				#team_butt1 {			background: #3f53ee;			width: 47%;			-moz-border-radius: 20px;			-webkit-border-radius: 20px;			border-radius: 20px;			padding: 5px;			float: left;		}				#team_butt2 {			background: #3f53ee;			width: 47%;			-moz-border-radius: 20px;			-webkit-border-radius: 20px;			border-radius: 20px;			padding: 5px;			float: right;		}

[ShadowMage]

To condense your CSS a little further you could create a class and apply that to the 'team_butt' divs and move the styles common to both into that class:

<div id='team_butt_cont'>   <div id='team_butt1' class='team_butt'>	  ...   </div>   <div id='team_butt2' class='team_butt'>	  ...   </div></div>

.team_butt {   background: #3f53ee;   width: 47%;   -moz-border-radius: 20px;   -webkit-border-radius: 20px;   border-radius: 20px;   padding: 5px;}#team_butt1 {   float: left;}#team_butt2 {   float: right;}

[thescientist]

I would like to congratulate the panel for observing that ID's must be unique. Wouldn't it be kewl if Bristol Palin could be our next contestant?Coding with the Stars . . .I can totally see this.

think she know's all about the concept of I/O by now?

[ShadowMage]

think she's know all about the concept of I/O by now?

Remember the age of our members here...let's keep this G-rated.