centering divs

adamr1001 · Mar 19, 2005

hi.

im new to this so by gentle!

t qs for y'all.

1.
i've got a bunch of divs that absolute in their positioning. they all fit together nicely, but i'd now like to have their collective arrangement centered on the page. any thoughs?

2.

can i define the positioning of a div in css relative to the position of another div? ...so that if i change the position of the independnent div, the second div will automatically adjust accordingly..

thanks!

Vragabond · Mar 19, 2005

1. Centering absolute positioning is much harder than normal (relative) positioning. However, it probably can be done, but it is impossible to advise you without seeing your code. My advice however would be ... (see #2)

2. Yes there is. It is called relative positioning and it is the regular positioning within the normal document flow. I strongly advise you to change the design of the page so that it is mostly utilizing relative as opposed to absolute positioning.

adamr1001 · Mar 19, 2005

ok, this is a small portion of my code.
i'd like to keep this same arrangement (i.e. menu-list under the header and aligned along the left side of the header), but have the whole thing centered on the page - how should i change the code?

many thanks in advance from a total beginner to css.

#header{
position: absolute;
top: 5px;
left: 5px;
width: 750px;
padding: 0px;
height: 150px;
}

#menu-list{
position: absolute;
top: 175px;
left: 5px;
width: 100px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom:10px;
}

Vragabond · Mar 19, 2005

How about?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
  <head>
    <title>Layout</title>
    <style type="text/css">
	body {
		margin: 5px;
		padding: 0;
	}

	#container {
		width: 750px;
		margin: 0 auto;
		padding: 0;
		background: #cccccc;
	}   
 
	#header {
		background: #8396aa;
		height: 150px;
	}

	#menu-list {
		margin: 25px 0 0 auto;
		width: 100px;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		background: #526f88;
	}    
    </style>
  </head>
  <body>
    <div id="container">
      <div id="header">Header</div>
      <div id="menu-list">Menu List<br />Sample <br />Sample <br />Sample <br />Sample <br />Sample <br />Sample <br /></div>
    </div>
  </body>
</html>

Hard to advise without seeing all code.

adamr1001 · Mar 19, 2005

thanks so much for your help

im curious about how this works...

1. when setting the relative positioning of an object, what determines what it's relative to?

2. is there a way to force an object to be positioned relative to another specific object?

-adam

adamr1001 · Mar 19, 2005

and so how can i set several objects to be set a specific top loction, while being dependant on a parent objects of variable height? when i set these object to 'absolute', i loose the ability to have it horizontally centered on the page.

thanks again friend.

Vragabond · Mar 19, 2005

How about a picture of what you want? Maybe floats could help? You seem to be strung out on a certain principle while there's a number of options to solve the problem. Maybe if you let us take a look at what you want, we'll be able to advise you better.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

centering divs

adamr1001

MIS

Vragabond

Programmer

adamr1001

MIS

Vragabond

Programmer

adamr1001

MIS

adamr1001

MIS

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor