Centering content in css.

Dev Shed Forums Sponsor:

December 8th, 2012, 11:14 AM

emilnygaardfris

Registered User

Join Date: Dec 2012

Posts: 4

Time spent in forums: 57 m 34 sec
Reputation Power: 0

Centering content in css.

I have issues positioning objects in css. I want to center a bar at the top of the page, a div with some boxes in the middle of the page and a footer at the bottom of the page.

I have succesfully centered the top bar, but the others i cannot figure out.

Hope you guys can help me!

Here is my code.

Code:

<html>
<link rel="stylesheet" type="text/css" href="css.css">
<head>
	<title>Banner</title>
</head>
<body>
	<div id="top">
		<div id="nav"></div>
		
	</div>
	<div class="footer"></div>
	<div id="main">
		<div class="p1">
			<a href="bla" class="lp1"></a>
		</div>
		<div class="p2">
			<a href="bla" class="lp2"></a>
		</div>
		<div class="p3">
			<a href="bla" class="lp3"></a>
		</div>
		<div class="p4">
			<a href="bla" class="lp4"></a>
		</div>
	</div>
</body>
</html>

Code:

body{
	margin: 0;
	background-color: grey;
	position: relative;
}
#top{
	width: 800px;
	height: 75px;
	background-color: black;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}
#nav {
	width: 300px;
	height: 45px;
	background-color: blue;
	position: absolute;
	right: 15px;
	top: 15px;
}
#main {
	background-color: grey;
	height: 500px;
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 12%;
}
.p1 {
	background-color: brown;
	height: 245px;
	width: 295px;
	position: absolute;
	top: 0px;
	left: 0px;
}
.p2 {
	background-color: brown;
	height: 245px;
	width: 295px;
	position: absolute;
	top: 0px;
	right: 0px;
}
.p3 {
	background-color: brown;
	height: 245px;
	width: 295px;
	position: absolute;
	bottom: 0px;
	left: 0px;
}
.p4 {
	background-color: brown;
	height: 245px;
	width: 295px;
	position: absolute;
	bottom: 0px;
	right: 0px;
}
a.lp1 {
	display: block;
	width: 100%;
	height: 245px;
}
a.lp2 {
	display: block;
	width: 100%;
	height: 245px;
}
a.lp3 {
	display: block;
	width: 100%;
	height: 245px;
}
a.lp4 {
	display: block;
	width: 100%;
	height: 245px;
}
.footer {
	background-color: black;
	height: 40px;
	width: 800px;
	position: absolute;
	bottom: 0px;
}

Thank you!

Emil

December 8th, 2012, 06:52 PM

Nanomech

Contributing User

Join Date: Aug 2011

Location: The Pleiades

Posts: 196

Time spent in forums: 1 Day 23 h 52 m 41 sec
Reputation Power: 7

Ok, played with the code and got it working.

You have your footer div BEFORE the 'p1','p2' divs. I put your footer div below that in the HTML and also changed some CSS.

I will highlight everything I've changed.

Code:

<div id="top">
	<div id="nav"></div>
		
</div>
	
<!--your footer was here for some reason??-->
	<div id="main">
		<div class="p1">
			<a href="bla" class="lp1"></a>
		</div>
		<div class="p2">
			<a href="bla" class="lp2"></a>
		</div>
		<div class="p3">
			<a href="bla" class="lp3"></a>
		</div>
		<div class="p4">
			<a href="bla" class="lp4"></a>
		</div>
	</div>
<div class="footer"></div>

CSS:

Code:

body{
	margin: 0;
	background-color: grey;
	position: relative;
}
#top{
	width: 800px;
	height: 75px;
	background-color: black;
	margin: auto;
	position: relative;
}
#nav {
	width: 300px;
	height: 45px;
	background-color: blue;
	position: absolute;
	right: 15px;
	top: 15px;
}
#main {
	background-color: grey;
	height: 500px;
	width: 600px;
	margin: auto;
	position: relative;
	top: 12%;
}
.p1 {
	background-color: brown;
	height: 245px;
	width: 295px;
	position: absolute;
	top: 0px;
	left: 0px;
}
.p2 {
	background-color: brown;
	height: 245px;
	width: 295px;
	position: absolute;
	top: 0px;
	right: 0px;
}
.p3 {
	background-color: brown;
	height: 245px;
	width: 295px;
	position: absolute;
	bottom: 0px;
	left: 0px;
}
.p4 {
	background-color: brown;
	height: 245px;
	width: 295px;
	position: absolute;
	bottom: 0px;
	right: 0px;
}
a.lp1 {
	display: block;
	width: 100%;
	height: 245px;
}
a.lp2 {
	display: block;
	width: 100%;
	height: 245px;
}
a.lp3 {
	display: block;
	width: 100%;
	height: 245px;
}
a.lp4 {
	display: block;
	width: 100%;
	height: 245px;
}
.footer {
	background-color: black;
	height: 40px;
	width: 800px;
	margin: auto;//this is to center
	position: relative;//changed to relative
	bottom: 0px;
}

Hope this helps you.

Kind regards,

Nm.

__________________
"WERE NOT WORTHY!"

"WERE NOT WORTHY!"

Last edited by Nanomech : December 9th, 2012 at 05:25 AM.

December 9th, 2012, 07:50 AM

simplypixie

Contributing User

Join Date: Aug 2012

Posts: 104

Time spent in forums: 18 h 33 m 57 sec
Reputation Power: 11

As Nanomech said, you have your footer in the wrong place etc.

However you have a lot of unnecessary code in your CSS so I have tidied everything up for you (people seem to be using position absolute and relative all over the place at the moment and it is entirely unnecessary). I hope this helps you code cleaner in the future.

Code:

<html>
<head>
	<title>Banner</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
	<div id="wrapper">
		<div id="top">
			<div id="nav"></div>
		</div>
		<div id="main">
			<p class="float-p"><a href="bla">Paragraph 1</a></p>
			<p class="float-p right-p"><a href="bla">Paragraph 2</a></p>
			<p class="float-p"><a href="bla">Paragraph 3</a></p>
			<p class="float-p right-p"><a href="bla">Paragraph 4</a></p>
		</div>
		<div class="clear"></div>
		<div id="footer"></div>
	</div>
</body>
</html>

And the CSS

Code:

body{
	margin: 0;
	background-color: grey;
}
p {
	margin: 0;
	padding: 0;
}
#wrapper {
	width: 800px;
	margin: auto;
}
#top{
	height: 75px;
	background-color: black;
}
#nav {
	float: right;
	width: 300px;
	height: 45px;
	background-color: blue;
	margin: 15px;
}
#main {
	background-color: grey;
	height: 500px;
	width: 600px;
	margin: auto;
	margin-top: 12%;
}
#footer {
	background-color: black;
	height: 40px;
}
.clear {
	clear: both;
}
.float-p {
	background-color: brown;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	height: 245px;
	width: 290px;
}
.right-p {
	margin-right: 0;
}
.float-p a {
	width: 100%;
	height: 245px;
}

Centering content in css.

Developer Shed Advertisers and Affiliates