proggR Posted August 2, 2009 Share Posted 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> Quote Link to comment https://forums.phpfreaks.com/topic/168551-an-position-absolute-mess/ Share on other sites More sharing options...
abazoskib Posted August 3, 2009 Share Posted August 3, 2009 margin-right: auto; margin-left: auto; Quote Link to comment https://forums.phpfreaks.com/topic/168551-an-position-absolute-mess/#findComment-889269 Share on other sites More sharing options...
sKunKbad Posted August 3, 2009 Share Posted 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> Quote Link to comment https://forums.phpfreaks.com/topic/168551-an-position-absolute-mess/#findComment-889273 Share on other sites More sharing options...
haku Posted August 3, 2009 Share Posted August 3, 2009 You can't center absolute positioned elements. Quote Link to comment https://forums.phpfreaks.com/topic/168551-an-position-absolute-mess/#findComment-889504 Share on other sites More sharing options...
proggR Posted August 3, 2009 Author Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/168551-an-position-absolute-mess/#findComment-889821 Share on other sites More sharing options...
TheFilmGod Posted August 6, 2009 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/168551-an-position-absolute-mess/#findComment-891772 Share on other sites More sharing options...
haku Posted August 6, 2009 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/168551-an-position-absolute-mess/#findComment-891802 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.