Darkmatter5 Posted July 3, 2008 Share Posted July 3, 2008 I have created a page with a block of divs with absolute positioning, but I would like to center the whole block of divs together, but continue to maintain the positions of the divs relative to each other. Here's my current code. <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="library/config.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"; style="position:absolute; top:20px; left:20px; width:980px; height:25px; z-index:1; visibility:visible; border: 1px black solid;"></div> <div id="sub-header"; style="position:absolute; top:45px; left:20px; width:980px; height:70px; z-index:1; visibility:visible; border: 1px black solid;"></div> <div id="content"; style="position:absolute; top:115px; left:20px; width:750px; height:500px; z-index:1; visibility:visible; border: 1px black solid;"></div> <div id="tools"; style="position:absolute; top:115px; left:770px; width:230px; height:500px; z-index:1; visibility:hidden; border: 1px black solid;"> <div id="tools-logged_in"; style="position:absolute; top:inherit; left:inherit; width:230px; height:80px; z-index:2; visibility:visible; border: 1px black solid;"></div> </div> <div id="footer"; style="position:absolute; top:615px; left:20px; width:980px; height:25px; z-index:1; visibility:visible; border: 1px black solid;"></div> </body> </html> Should I create one large div at z-index 1 and make it the parent of all the others and center that main div? But again how do I maintain their positioning if the main div centers itself? Will the browser be confused as to where to render the child divs or will it use the coordinates relative to the parent div? Too many questions I know, I'll just leave it up to your guy's suggestions! Thanks! Quote Link to comment Share on other sites More sharing options...
haku Posted July 4, 2008 Share Posted July 4, 2008 You have just discovered why you shouldn't use absolute positioning to position your elements on a page. Absolute positioning is the fool's gold of CSS. It seems good at the start, because you can put your elements wherever you want! So many people who are new to CSS try to position everything absolutely, only to discover that this causes problems along the line later on. Problems exactly like you are having. Your best bet is to get rid of the absolute positioning on everything, and start from scratch. Maybe you can try the FNE (I think that's what it's called - Float Nearly Everything) method, which basically does what it says. It's not a method I use, but there are plenty of tutorials on it, and it's a good place to begin for someone who is trying to use absolute positioning and discovering that it doesn't work. note: absolute positioning does have its time and place. But by the time you figure out what that time and place is, you will be able to recognize that that is the time and place. So if you aren't sure, then you can probably safely bet that you shouldn't be using it there. Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted July 6, 2008 Share Posted July 6, 2008 nothing wrong with absolute positioning - it is very powerful and indeed useful tool in building sites well... you are correct in your thinking that you need some control over the parent element - but you can add these to the body if you so wish... body { position: relative; width: 980px; margin: auto; } try that - its should give you something like what you want. Quote Link to comment 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.