Help centering a <Div> element

View New Content

Page 1 of 1

You cannot start a new topic
You cannot reply to this topic

Help centering a <Div> element

#1 Kidrandom

Forum Newcomer

Group: Members
Posts: 19
Joined: 08-April 09
Reputation: 0
Experience:Nothing
Area of Expertise:Designer

Posted 13 April 2009 - 08:14 PM

Hello again,

I'm trying to center a <div> element in my webpage but can't seem to get it right.

Here's the basic structure:

 <div id="contentwrapper">
	
	
	
		<div id="maincontent">
			
		</div>
		

		 
	</div>

So that part I want to center is the "maincontent" which contains the writing.

Here's the css for both above:

#contentwrapper{
  
  width:900px;
  height: 450px;
  background-image: url(images/Front_1.jpg);
  background-repeat: no-repeat;
}

#maincontent {
	position:absolute;
 	width: 380px;
 	text-align: justify;
 	border-style: solid;
 	margin-top: 10px;
 	margin-bottom: 10px;
	height: 410px;
 	background-color: #000;
	background-repeat: no-repeat;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}

I've tried using left/right margin set to Auto but with no success. I've also tried using the Left/right properties but you can only use pixels and percentages which still doesn't do it.

Am I being stupid here? How do I go about getting the "maincontent" centered?

Thanks

Nick

#2 bocaj

Retired

Group: Members
Posts: 3,402
Joined: 11-January 09
Reputation: 99
Gender:Male
Location:New Sarum
Experience:Web Guru
Area of Expertise:Entrepreneur

Posted 13 April 2009 - 08:18 PM

The easiest method, because you have a fixed width would be something like this

#maincontent {
	padding-left:50%;
	margin-left:-190px;
	width: 380px;
}

The way that works is that the padding left 50% positions the left hand side of the element in the dead center of the page, obviously this isn't right as we want the center of the element in the center of the page, and not the left of the element in the center. So then we add the margin-left equal to half the width of the element (a negative value) to pull the element over to the left and center the element, if that makes sense?

#3 ElanMan

In, out, shake it all about...

Group: Members
Posts: 3,298
Joined: 11-March 08
Reputation: 54
Gender:Male
Location:Darlington
Experience:Nothing
Area of Expertise:Nothing

Posted 13 April 2009 - 08:20 PM

Change the #maincontent css to this:

#maincontent {
	width: 380px;
	text-align: justify;
	border-style: solid;
	margin: 10px auto; 
	height: 410px;
	background-color: #000;
	background-repeat: no-repeat;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}

I've removed the absolute positioning and given it auto margins right and left with top /bottom margins of 10px.

#4 bocaj

Retired

Group: Members
Posts: 3,402
Joined: 11-January 09
Reputation: 99
Gender:Male
Location:New Sarum
Experience:Web Guru
Area of Expertise:Entrepreneur

Posted 13 April 2009 - 08:22 PM

yeah, you shouldn't need absolute positioning at all, this removes the element from the page flow.

#5 Dizi

Queen of the Spammers

Group: Members
Posts: 5,654
Joined: 13-August 07
Reputation: 161
Gender:Female
Location:Newcastle, UK
Experience:Advanced
Area of Expertise:Web Designer

Posted 13 April 2009 - 08:23 PM

It is because you are using an absolute position which overrides margin settings so it is setting your maincontent div to the top left of the contentwrapper instead of centering...

Easiest fix, take out position:absolute; and add margin 0 auto; in again and that will center it in your contentwrapper.

#6 Kidrandom

Forum Newcomer

Group: Members
Posts: 19
Joined: 08-April 09
Reputation: 0
Experience:Nothing
Area of Expertise:Designer

Posted 13 April 2009 - 08:42 PM

Hey,

Thanks for the help so far guys. But for some reason when I remove the absolute positioning and use the margin properties like so:

#maincontent {
 		width: 380px;
		text-align: justify;
		border-style: solid;
		margin: 10px auto;
		height: 410px;
		background-color: #000;
		background-repeat: no-repeat;
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
}

The top of the "maincontent" element sticks to the top of the "contentwrapper" and when I try to use the margin-top property to move it down, it applies it to the "contentwrapper" as well so its moving both at the same time <_<

Any ideas as to why this is happening?

#7 ElanMan

In, out, shake it all about...

Group: Members
Posts: 3,298
Joined: 11-March 08
Reputation: 54
Gender:Male
Location:Darlington
Experience:Nothing
Area of Expertise:Nothing

Posted 13 April 2009 - 08:50 PM

Could you post all of the html/link to a live example?

#8 Kidrandom

Forum Newcomer

Group: Members
Posts: 19
Joined: 08-April 09
Reputation: 0
Experience:Nothing
Area of Expertise:Designer

Posted 13 April 2009 - 09:06 PM

ElanMan, on Apr 13 2009, 21:50, said:

Could you post all of the html/link to a live example?

I'm afraid I don't quite know how to do that. I can however post a jpeg of the page that has the problem if that can help.

So here's a picture of what happens when I remove absolute positioning:

Picture_2.png (517.73K)
Number of downloads: 1

and here's a picture of what happens when I use margin-top: 150px to try and adjust this.

Picture_3.png (481.25K)
Number of downloads: 0

#9 ElanMan

In, out, shake it all about...

Group: Members
Posts: 3,298
Joined: 11-March 08
Reputation: 54
Gender:Male
Location:Darlington
Experience:Nothing
Area of Expertise:Nothing

Posted 13 April 2009 - 09:18 PM

All of the html and css will do. Just makes debugging a bit easier

#10 mike_1337

Dedicated Member

Group: Members
Posts: 151
Joined: 06-December 07
Reputation: 0
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 13 April 2009 - 09:22 PM

ElanMan, on Apr 13 2009, 22:18, said:

All of the html and css will do. Just makes debugging a bit easier

Make sure you have the right DOCTYPE

Assuming you have XHTML Transitional -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

width margin-left:auto; margin-right:auto;

#11 Kidrandom

Forum Newcomer

Group: Members
Posts: 19
Joined: 08-April 09
Reputation: 0
Experience:Nothing
Area of Expertise:Designer

Posted 13 April 2009 - 09:49 PM

ElanMan, on Apr 13 2009, 22:18, said:

All of the html and css will do. Just makes debugging a bit easier

Thanks

HTML:

<!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" lang="en" xml:lang="en">
<head>
<title>Vintage Freak</title>
<link rel="stylesheet" type="text/css" href="littlem.css" />
</head>

<body>
	
	<div id="maincontainer">

	  
		
	  
	<div id="header">
		
		
		<div id="navigation">
				<ul>
				<li><a href=""><img src="images/Tab.jpg"></a> </li>
				<li><a href=""><img src="images/Tab_1.jpg"></a></li>
				<li><a href=""><img src="images/Tab_2.jpg"></a></a></li>
				<li><a href=""><img src="images/Tab_3.jpg"></a></a></li>
				  </ul>
		</div>
	
	
	</div>

	

	 <div id="contentwrapper_contact">
		

	
	
		<div id="maincontent_contact">
			
		</div>
		
		

		 
	</div>
		  <div id="footer">
			<table class="table">
				<tr>
					<td></td>
					<td class="info">Designed by</td>
				</tr>
				<tr>
					<td>2009</td>
					<td class="info">Nick Ayoola</td>
				</tr>
			</table>
		 </div>
	  </div>
	 </div>
	
	</body>

	</html>

CSS:

html,body{
  margin:0;
  padding:0;
  font-family:arial, verdana, sans-serif;
  background-color:#000;
  height:100%;
}

#maincontainer {
  width:970px;
  margin-right: auto;
  margin-left: auto; 
  min-height:100%;
  position:relative;
  margin-top: 10px;
  
  padding: px;	
}


#topsection{
  color:#ffffff;
  
  }

#logo {

	background-repeat: no-repeat;
}

#header {
	width: 900px; 
	height: 126px;
	background-image: url(images/header.gif);
	background-repeat: no-repeat;
	
	
}

#navigation li {
  display:inline;
  margin:0;
  padding:0;
  }



#contentwrapper_contact{
  
  width:900px;
  height: 450px;
  background-image: url(images/Contact.jpg);
  background-repeat: no-repeat;
}



#navigation {
  
  /*Width of left column*/
  float: right;
  margin-top:46px;
  margin-right:20px;
}

#navigation a {
	  float:left;
	  margin:0;
	padding:0 0 0 0px;
	text-decoration:none;
  }

	

.clear {clear:both;
	}




#maincontent_contact {
 		width: 380px;
		text-align: justify;
		border-style: solid;
		margin: auto;
		top: 15px;
		height: 410px;
		background-color: #000;
		background-repeat: no-repeat;
		opacity: .90;
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
}




li {
	list-style-type:none;
}




#footer{
  
  height:50px;
  clear: left;
  width: 900px;
  border-style: solid;
  border-color: #ffffff;
  background-color:#000;
  margin-bottom: 10px;
  margin-top: 20px;
	  -moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}

#logo {
		padding-right:100px;
	
}

.table{ width:900px;
		max-width:800px;
	}


td.info {
  text-align: right;
}


p {
 
 margin-right: 2px;
 margin-left: 2px;
}

The <div> tags I'm refering to are "contentwrapper_contact" and "maincontent_contact".

Cheers

#12 Kidrandom

Forum Newcomer

Group: Members
Posts: 19
Joined: 08-April 09
Reputation: 0
Experience:Nothing
Area of Expertise:Designer

Posted 13 April 2009 - 09:49 PM

ElanMan, on Apr 13 2009, 22:18, said:

All of the html and css will do. Just makes debugging a bit easier

Thanks

HTML:

<!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" lang="en" xml:lang="en">
<head>
<title>Vintage Freak</title>
<link rel="stylesheet" type="text/css" href="littlem.css" />
</head>

<body>
	
	<div id="maincontainer">

	  
		
	  
	<div id="header">
		
		
		<div id="navigation">
				<ul>
				<li><a href=""><img src="images/Tab.jpg"></a> </li>
				<li><a href=""><img src="images/Tab_1.jpg"></a></li>
				<li><a href=""><img src="images/Tab_2.jpg"></a></a></li>
				<li><a href=""><img src="images/Tab_3.jpg"></a></a></li>
				  </ul>
		</div>
	
	
	</div>

	

	 <div id="contentwrapper_contact">
		

	
	
		<div id="maincontent_contact">
			
		</div>
		
		

		 
	</div>
		  <div id="footer">
			<table class="table">
				<tr>
					<td></td>
					<td class="info">Designed by</td>
				</tr>
				<tr>
					<td>2009</td>
					<td class="info">Nick Ayoola</td>
				</tr>
			</table>
		 </div>
	  </div>
	 </div>
	
	</body>

	</html>

CSS:

html,body{
  margin:0;
  padding:0;
  font-family:arial, verdana, sans-serif;
  background-color:#000;
  height:100%;
}

#maincontainer {
  width:970px;
  margin-right: auto;
  margin-left: auto; 
  min-height:100%;
  position:relative;
  margin-top: 10px;
  
  padding: px;	
}


#topsection{
  color:#ffffff;
  
  }

#logo {

	background-repeat: no-repeat;
}

#header {
	width: 900px; 
	height: 126px;
	background-image: url(images/header.gif);
	background-repeat: no-repeat;
	
	
}

#navigation li {
  display:inline;
  margin:0;
  padding:0;
  }



#contentwrapper_contact{
  
  width:900px;
  height: 450px;
  background-image: url(images/Contact.jpg);
  background-repeat: no-repeat;
}



#navigation {
  
  /*Width of left column*/
  float: right;
  margin-top:46px;
  margin-right:20px;
}

#navigation a {
	  float:left;
	  margin:0;
	padding:0 0 0 0px;
	text-decoration:none;
  }

	

.clear {clear:both;
	}




#maincontent_contact {
 		width: 380px;
		text-align: justify;
		border-style: solid;
		margin: auto;
		top: 15px;
		height: 410px;
		background-color: #000;
		background-repeat: no-repeat;
		opacity: .90;
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
}




li {
	list-style-type:none;
}




#footer{
  
  height:50px;
  clear: left;
  width: 900px;
  border-style: solid;
  border-color: #ffffff;
  background-color:#000;
  margin-bottom: 10px;
  margin-top: 20px;
	  -moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}

#logo {
		padding-right:100px;
	
}

.table{ width:900px;
		max-width:800px;
	}


td.info {
  text-align: right;
}


p {
 
 margin-right: 2px;
 margin-left: 2px;
}

The <div> tags I'm refering to are "contentwrapper_contact" and "maincontent_contact".

Cheers

Web Design Forum: Help centering a <Div> element - Web Design Forum

WDF Marketplace

WDF Marketplace Resources

WDF Community

Web Design Resources

Web Development

SEO, Marketing & Business

Software & Hardware

The Marketplace

Help centering a <Div> element

#1 Kidrandom

#2 bocaj

#3 ElanMan

#4 bocaj

#5 Dizi

#6 Kidrandom

#7 ElanMan

#8 Kidrandom

#9 ElanMan

#10 mike_1337

#11 Kidrandom

#12 Kidrandom

Share this topic:

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users

Delete Post

Skin and Language

Execution Stats

Web Design Forum: Help centering a <Div> element - Web Design Forum

Help centering a <Div> element

Share this topic:

1 User(s) are reading this topic 0 members, 1 guests, 0 anonymous users

Delete Post

Skin and Language

Execution Stats

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users