Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Centering website using DIV absolute layout

Posted on 2008-06-24
17
Medium Priority
?
1,845 Views
Last Modified: 2010-05-18
I'm using DIVs to set my web page layout, using the position: absolute element.  I can't get the website to center if I do this though, and if I use float instead the background flows round the edge of the layout, which isn't what I want.  I've attached both example css and jsp, can anyone help?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>leagues ahead : test</title>
	<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
	<div id="header"><img src="Logo_small.jpg" alt="Leagues Ahead"></div>
	<div id="leftcol">Left Section</div>
	<div id="shortmenu">Short menu</div>
	<div id="content">Content Section</div>
	<div id="footer">Footer Section</div>
</body>
</html>
 
@CHARSET "ISO-8859-1";
<style type="text/css">
<!--
body {
	background-position: center;	
	background-color: #EEEEEE;
}
#header {
  background: white;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 800px;
  height: 125px;
}
#leftcol {
  background: #106070;
  position: absolute;
  top: 125px;
  left: 0px;
  width: 150px;
  height: 450px;
}
#shortmenu {
	background: #88b050;
	position: absolute;
	left: 150px;
	width: 650px;
	top: 125px;
	height: 25px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: white;
}
#content {
  background: #fff;
  position: absolute;
  top: 150px;
  left: 150px;
  width: 650px;
  height: 425px;
  padding-left: 6px;
  padding-top: 3px; 
}
#footer {
	background: #106070;
	position: absolute;
	top: 575px;
	left: 0px;
	width: 800px;
	height: 25px;
	border-top: 1px solid white;
}
-->
</style>

Open in new window

0
Comment
Question by:Belazir
  • 7
  • 3
  • 2
  • +4
17 Comments
 
LVL 4

Expert Comment

by:FSIFM
ID: 21856822
add into the containing div's

margin:0px auto;
0
 
LVL 17

Expert Comment

by:ram_0218
ID: 21857280
cover all the elements in another DIV like this:
<body>
 <div>
   your DIV here
 </div>
</body>

and the covered div style:
height:100%;
position:absolute;
left:20%;
width:auto;

let me know how it does!
0
 
LVL 5

Accepted Solution

by:
codeQuantum earned 1000 total points
ID: 21857889
The mentioned solutions won't work. When you use absolute positioning, it means you are placing your elements according to the absolute size of the window and you do not inherit any positions from the containing elements or divs.

There are many problems with your code... like @CHARSET "ISO-8859-1"; that is not well placed, and the div positionning that is flawed, and you are using XHTML style tag closing while you declared HTML 4... However, since this question is about centering, I will concentrate on solving this specific problem.

1) You won't be able to center things if you use absolute anywhere in your code. Use relative or don't specify a style at all.
2) check this link for the best way to center a page : http://www.maxdesign.com.au/presentation/center/
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 5

Expert Comment

by:codeQuantum
ID: 21857924
Just remember when coding in HTML : Use simple tags for simple things. Only use more advanced stuff if you need to do something very specific that can't be done with simple commands.

Centering a page is very simple stuff. You don't need to use absolute or float at all, and trying to do so will just make things a lot harder. (Or even impossible!)
0
 
LVL 17

Expert Comment

by:ram_0218
ID: 21858634
>>The mentioned solutions won't work. When you use absolute positioning, it means you are placing your elements according to the absolute size of the window and you do not inherit any positions from the containing elements or divs.

Absolutely false!!! position:absolute; left indicates its relative to the wrapper! In the wrapper's offset width,height its absolute positioning, not on the entire window!! Can you set up a small test page and prove it?

0
 
LVL 5

Expert Comment

by:codeQuantum
ID: 21858859
Sure, have a look at this code :
<html>
<head>
<style type="text/css">
.goright {
	text-align: right;
	width: 200px;
}
.goleft
{
width: 200px;
position:absolute;
left:0px;
top:150px
}
</style>
</head>
 
<body>
<div class="goright">
<h4 class="goleft">Absolute positionnnig tells this heading to go left, while its containing element tells it to go right. <br><br>
As you can see, absolute positionning completely ignore the containing element. (There are some exceptions.)</h4>
</div>
</body>
</html>

Open in new window

0
 
LVL 5

Expert Comment

by:codeQuantum
ID: 21858924
Oh my bad. Just noticed you absolutely positioned the container in your code... yeah that would work!!

Mea culpa, sorry ram_0218.
0
 

Expert Comment

by:icedesignstudios
ID: 21860206
Here is a short snippet of code that will centre a div that is 500 pixels wide:

If you modify it, it should do just what you're looking for.
<style type="text/css">
<!--
#centre {
	background-color: #000000;
	height: 500px;
	width: 500px;
        position: absolute;
	left: 50%; /* You move the left side of the container to the middle of the screen */
	margin-left: -250px; /* Then you pull it back by subtracting 1/2 of its width */
}
-->
</style>

Open in new window

0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 21860427
not to interfere with the above experts, but seems to me --

<DIV align = "center" > 
 .. other stuff ...
<DIV align = "center">
   ... what you want to center
</DIV>
  ... other stuff
</DIV>

would do it simply, no ?
0
 
LVL 5

Expert Comment

by:codeQuantum
ID: 21860560
scrathcyboy: See my reply earlier. Since it is absolutely positioned it will ignore align="center" and use the pixel coordinates instead. (It only take into account other absolutely positioned elements, and that is one of the exceptions I mentioned in my code example.)
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 21860719
" I can't get the website to center "

Well if that's all he wants to do, leave the align = center, and remove absolute and replace it with relative -- that should work.  

This is a classic example of where absolute positioning is a disaster.  If he sets his layout to % or floating, and someone views this on a different size screen and resizes the page, everything is thrown off alignment and nothing is centered any more.
0
 
LVL 5

Expert Comment

by:codeQuantum
ID: 21860742
Agreed. That is what I meant when I said using absolute positioning was overkill in this situation.
0
 
LVL 4

Expert Comment

by:sajay_j
ID: 21862016
Added below is the fixed code for your problem. Please check it.

Regards

Sajay
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>leagues ahead : test</title>
	<link rel="stylesheet" type="text/css" href="test.css" />
<style>
<!--
body {	
	background-color: #EEEEEE;
}
 
#container {
	margin:0px auto;
	width:800px;
	height:100%;
}
 
#header {
  background: white;
  float:left;
  width:800px;
  height: 125px;
}
#leftcol {
  background: #106070;
  float:left;
  width: 150px;
  height: 450px;
}
#shortmenu {
	background: #88b050;
	float:left;
	width: 649px;
	height: 25px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: white;
}
#content {
  background: #fff;
  float:left;
  width: 644px;
  height: 425px;
  padding-left: 6px;
  padding-top: 3px; 
}
#footer {
	background: #106070;
	float:left;
	width:800px;
	height: 25px;
	border-top: 1px solid white;
}
-->
</style>
</head>
<body>
	<div id="container">	
		<div id="header"><img src="Logo_small.jpg" alt="Leagues Ahead"></div>
		<div id="leftcol">Left Section</div>
		<div id="shortmenu">Short menu</div>
		<div id="content">Content Section</div>
		<div id="footer">Footer Section</div>
	</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:Belazir
ID: 21870517
Well, I didn't expect a deluge.  It will take me a while to digest all of this so apologies if I don't get back to you for a few days.

A question though codeQ: I am using absolute positioning in order to get the layout right; I've tried using floats but I get annoying seepage of the background around the top and bottom of the main page content.  Only with absolute positioning can I get this to work.  I did prefer not to use this but if I don't, how do I get the top of my header DIV to actually be at the top of the window rather than some 10 or 15 pixels lower?  If I can figure that, I can revert to using floats and then I gather from the above this all becomes rather easier.

thanks
B
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 21870557
you just assign to the DIV the same attributes as any other element --

DIV.center {  margin:0px; padding:0px overflow:visible; }  etc

<DIV class="center" >   etc/
0
 
LVL 5

Assisted Solution

by:codeQuantum
codeQuantum earned 1000 total points
ID: 21871047
Afaik you need to remove margins from your page. Try this code in your "body" along with your float placement and tell us if it works. (This is the usual suspect, but there are other possibilities.)
body {
        background-position: center;    
        background-color: #EEEEEE;
  margin: 0;
  padding: 0;
}

Open in new window

0
 

Author Comment

by:Belazir
ID: 21891986
Hi all

Many of your answers had good suggestions but codeQuantum's was the most thorough and was the one that helped me work this one through, I hope you're happy for me to award the points there rather than trying to split them 6 different ways.

Thanks for the plethora of useful tips.
B
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question