How do I achieve complete control of my DIV elements?


I am having trouble understand the correct way to position my div elements within the page.  Currently I seem to be battling away positioning my textual content using divs.  Howver if I move the position of one div on the page it affects all of my other divs positions.  Should I use the z index to use layering?  I thought this defeated the object slightly as using z index method forces you to use absolute positioning?

My problem is that I seem to be using the minus - property to offset my divs.  Is this the correct method?  i.e   margin-top: -200px;

Hope you can help me.
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

what I do ,and it works, is do a container div for the screen size currently I do 800*600 and use absolute div positioning in that container div

are you using css?
please provide the relevant code for us to help you better.
Nenad RajsicCommented:
IanTh is right and that is how everyone builds pages now a days. Create a container DIV with your desired page width and then put all your other divs inside you "container". If you use CSS float properties inside your container just make sure that you "clear" css properties to prevent overlaping

see some examples from my page. first you create a structure like in my example and then you place other divs inside one of the layout divs
#container {
	width: 990px;
	margin: 0px auto;
	text-align: left;
this is my main container

#header { width: 990px; }
header and other header divs go in here

#layout_default div#dynamic_box_right        {width: 260px;}
#layout_default div#dynamic_box_left         {width: 160px;}
#layout_default div#dynamic_box_center       {width: 570px;}
3 columns page

#footer { width: 990px; }
footer - you put your footer content and other divs in here

Open in new window

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

yes I use float left on all the elements inside the container div so the dont overlap and If I want a better way of say mounting is use margins and the likes on the divs
This lesson was the key in my understanding of positioning divs- hope it helps you too: 

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GeekFreekAuthor Commented:
Thanks.  I read all of the CSS positioning pages and it helped me to understand my problem.  I wasn't staing the type of positioning in my css.  I was just using the margin properties to offset them in relation to their parent containers (divs).

Thanks everyone!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.