Having troubles with Divs staying in Place.

[Preeminent]

Hi All,
I am having a problem with divs. I have multiple divs contained within the "extras" div as you can see below.
I currently have a jquery/php photo scroller("api"), an rss to html converter("blog"), and a contact form("contact"), all within "extras".
Well as you can see below, I still need to add content to "books" div and the "music" div. Every time I do, the "blog" and "contact" divs are effected and get moved down.

The divs don’t really have margins that would be causing this.

What can I do so that this doesn’t happen. Do I need to use "clear-both" somewhere?

Code:

I also take pictures…

//I need content Here.//

//I need content Here.//

Name

Email

Message

Here is the css for the divs above:

Code:

#extras {
background: url(“api.png”);
position:relative;
height:536px;
width:980px;
overflow:hidden;

#api {
position:relative;
left:60px;
top:20px;
width:200px;
height:200px;
}

#blog {
position:relative;
left:470px;
width:150px;
top:-65px;
}

#takepictures {
position:relative;
left:83px;
top:13px;
width:250px;
font-size:25px;
font-family:Georgia, “Times New Roman”, Times, serif;
}

#contact {
position:relative;
float:right;
width:200px;
top:-375px;
margin-right:70px;
}
}

[mikeFromBavaria]

What do you mean by "Every time I do, the "blog" and "contact" divs are effected and get moved down"?
Do you mean that the output in the browser actually gets moved down?

The first thing that I recognize is that you css definition for the #extras div is not being closed!!
In most cases when I have trouble with css a invalid css definition is the cause for the problems.
Try using a xhtml validator like the http://validator.w3.org/
This (in most cases) will help you identify problems, that are caused by e.g. not closed div tags or wrong definitions!

Greets, Michael

[Author]

Posts