An (position) absolute mess!

proggR · August 2, 2009

I cannot remember for the life of me how to center divs properly. I've done it a hundred times before but its been a while since I've done any development and I've coded myself into a terrible mess. I know in the past I've had a lot of issues with absolute and relative positioning but I've always managed to come up with code that worked and validated. This is far from both.

The code I'm including shows the basic look, however its not centered and most of the coordinates have been hard coded in. I'd like to remove most of the hard coding and let the browser just figure that its supposed to be centered with a min-width of 800 or 900 or whatever I choose.

Here's the mess so far. If anyone can figure out what its supposed to look like from this and how to do it I'd really appreciate it. Thanks in advance.

<html>
<head>
<style>
a{
text-decoration:none;
}
body{
text-align:center;	
}
.wrapper{
position: absolute;
width: 800px;
margin: 0 auto;
text-align: left



}
.text{
border:1px solid black;
width:435px;
height:35px;
font-size:24px;
}
.boxes{

position: absolute;
top:250px;//inserted to compensate for the removed banner
height: 300px;
border: 1px solid black;
padding:10px;
padding-left:25px;
font-family: "Arial";
font-size:26px;
}
.button{
position:absolute;
top: 600px;
padding:10px;
padding-left:20px;
padding-right:20px;
border: 3px solid black;
background-color:#FF7F27;
color:#FFFFFF;
font-family: "Georgia";
font-weight:bold;
font-size:21px;
width:auto;
left:10px;
}
.login{
position:absolute;
top: 180px;
right: 25px;
padding: 10px;
padding-left:20px;
padding-right:20px;
border: 3px solid black;
background-color:#22B14C;
color:#FFFFFF;
width:auto;
font-family: "Georgia";
font-weight:bold;
font-size:21px;
}
</style>
</head>
<body>
<div class = "wrapper">

<div class = "boxes" style ="width: 450px; left: 150px;" >
	<p>username:<br/>
	<input type="text" name = "user" class="text" ><br/>
	password:<br/>
	<input type="text" name = "pass" class="text"/><br/>
	<input type = "checkbox" name = "remember"/> remember me
	<a href="userpanel.html">
	<div class = "login">
		Login
	</div>
	</a>
	</p>
</div>
<div class = "boxes" style ="width: 300px; left: 650px;">
	<p>Not already hosted here?</p>
	<p style="font-size:18px;">
	See why you should be.<br/>
	Click the buttons below to learn more.
	</p>
	<a href="userpanel.html">
	<div class = "login">
		Sign up now!
	</div>
	</a>

</div>

<p>
	<a href="#">
	<div class = "button" style ="left: 140px;">
		Packages & Services
	</div>
	</a>
	<a href="#">
	<div class = "button" style ="left: 410px;">
		Documentation
	</div>
	</a>
	<a href="#">
	<div class = "button" style ="left: 631px;">
		Donate
	</div>
	</a>
	<a href="#">
	<div class = "button" style ="left: 763px;">
		Contact
	</div>
	</a>
	<a href="#">
	<div class = "button" style ="left: 900px;">
		News
	</div>
	</a>
</p>
</div>
</body>
</html>

abazoskib · August 3, 2009

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

sKunKbad · August 3, 2009

You are correct about the mess. First, you must declare a doctype, or you are going to force browsers into quirks mode, and you will never reliably have a design that works. Next, there is nothing that you are trying to do that needs absolute positioning, and absolute positioning will just bite you in a rear when it comes to your site being accessible.

Look at this example, and study it:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; utf-8" />
<meta name="language" content="en" />
<title>Basic CSS Floats</title>
<style type="text/css">
	#container{
		width:606px;
		margin:0 auto;
	}
	#wrapper{
		float:left;
		width: 600px;
		background-color:pink;
		border:solid 3px red;
	}
	#bluebox{
		float:left;
		width:50%;
		height:200px;
		background-color:blue;
		color:white;
		text-align:center;
	}
	#greenbox{
		float:right;
		width:50%;
		height:200px;
		background-color:green;
		color:white;
		text-align:center;
	}
	#clearwide{
		float:left;
		width:100%;
		clear:both;
		line-height:0px;
	}
	#yellowbox{
		float:left;
		width:100%;
		height:200px;
		background-color:yellow;
		text-align:center;
	}
</style>
</head>
<body>
<div id="container">
	<div id="wrapper">
		<div id="bluebox">
			<p>Blue</p>
		</div>
		<div id="greenbox">
			<p>Green</p>
		</div>
		<div id="clearwide">
			 
		</div>
		<div id="yellowbox">
			<p>Yellow</p>
		</div>
	</div>
</div>
</body>
</html>

haku · August 3, 2009

You can't center absolute positioned elements.

proggR · August 3, 2009

You are correct about the mess. First, you must declare a doctype, or you are going to force browsers into quirks mode, and you will never reliably have a design that works. Next, there is nothing that you are trying to do that needs absolute positioning, and absolute positioning will just bite you in a rear when it comes to your site being accessible.

Thank you very much. I've managed to get it looking nearer to what I had planned. I find that width:auto doesn't seem to work for the buttons and I have to figure out their widths but its still much better than it was.

I just have to get the orange colored buttons at the bottom put in now. I imagine each will have its own div. I'm probably going to have to figure out the widths again like for the Login and Sign Up buttons but at least I shouldnt have to figure out how far left they each are now. I'll repost again when I'm stuck or have it working. Thanks again . Its been a while.

TheFilmGod · August 6, 2009

You can't center absolute positioned elements.

Not entirely correct. You can use its parents (position: relative) and use it to center the page.

haku · August 6, 2009

Well, if we are going to be pedantic - that's not actually centering the absolutely positioned element, it's centering it's parent. The absolutely positioned element just follows along.

But I get what you are saying, and to the end user it's not going to matter.

Sign In

An (position) absolute mess!

Recommended Posts

proggR

Link to comment

Share on other sites

abazoskib

Link to comment

Share on other sites

sKunKbad

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

proggR

Link to comment

Share on other sites

TheFilmGod

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information