Jump to content

Div Troubles


lichtheman
 Share

Recommended Posts

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;		}

Edited by lichtheman
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Edited by thescientist
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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;		}

Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

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? :) Edited by thescientist
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...