0

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!

3
Contributors
10
Replies
11
Views
5 Years
Discussion Span
Last Post by saurabh2007
Featured Replies
  • 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. Read More

0

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.

1

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.

0

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.) ;)

0

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.

0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.