Simple Question - Two divs

[saurabh2007]

This is a simple question but since I am having problems with it, I am asking it here.

I have a div inside a file called head.php

in my index.php, when i do <? include ("head.php"); ?>
and then do something like <div style="margin:0 auto; width:900px"></div>

it shows the two div's(head and the box in index.php), but I want the box to show after the head div. Right now, it shows the second div width 100% height and the head div on top of it so if I write something in the second div, it gets hidden behind the head div. I know I can use padding but I need to move the whole box down so it comes in sequential order (included head.php first so head div should show first, then after that, it should show the second div)

Any ideas?

Thanks for the help!

[cereal]

This is related to CSS not PHP. Which DocType are you using? Are you using z-index somewhere? Are you closing the div in head.php?

Try to use display:block; position:relative; float:left; z-index:0; in both divs, at this point you can use margin to set a distance between them.

[saurabh2007]

The head div has position fixed and that div is closed.

[Dandello]

Okay - fixed (like any positioning) means that div has moved out of the regular flow, so anything beneath it needs to have a position (or a margin) set to allow room for the fixed div above it.

Note - IE has a tendency to mess this up.

[saurabh2007]

So should I set a margin-top to the second div?

[Dandello]

margin-top or position relative. You may have to play around with it a bit but one of those should do it.

You might also want to look at it in different screen resolutions - things like fixed divs can break a page when it's taken down too small, so a min-width on the body or the fixed div might be in order as well. (Or might not.) ;)

[saurabh2007]

Here is another problem

overflow:auto;
		margin: 0 auto;
		padding-top:20px;
		width: 200px;
		min-height: 100%;
		border: 1px solid black;
		background: #E8E8E8;
		-moz-box-shadow: 0 0 30px 5px #999;
		-webkit-box-shadow: 0 0 30px 5px #999;

That is the CSS code for a div. That is supposed to be a parent div since there are other div's inside it. Apparently, width is not changing no matter what I set for that width.

[Dandello]

What happens when you remove the width altogether? (Since there's no page to look at.)

[saurabh2007]

it stays the same. It is not affected at all.

[Dandello]

Open the page using IE - Open developer's tools (F12)

In the windows that open, you can see the ALL the css affecting a particular element. You can also turn off different attributes and see what happens. Chances are, there's something restricting the width and that something is a different element that may not be properly closed.

Also make sure your code validates - run it through the WC3 validator.

[saurabh2007]

I got it to work, thanks anyways.