Jump to content

Center a div and maintain child div positions


Recommended Posts

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">
<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" />

<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 id="footer"; style="position:absolute; top:615px; left:20px; width:980px; height:25px; z-index:1; visibility:visible; border: 1px black solid;"></div>


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!



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.