CODEWITHSUNDEEP
css
Gary
Gary

Reputation: 1

How do I get this DIV to display below all the content on this page?

I have a relative <div> with a couple of absolutely positioned <div>s within it. I want to display a footer <div> below all of this content, but for some reason, it's showing up behind one of the <div>s instead of below it.

Here is the page: (I've set the background of the footer div to red so you can see what I mean):

http://wreckedexotics.com/3series2/3series_20091106_001.shtml

Upvotes: 0

Views: 263

Answers (3)

Šime Vidas
Šime Vidas

Reputation: 186103

The DIV with the green border is absolutely positioned and has a fixed height (set to 740px). The red DIV does not know (and cannot know) where (vertically) the green DIV ends (Absolutely positioned elements are removed from the page flow).

Solution:

The DIV with the black border: overflow:auto
The DIV with the gray background: float:left
The DIV with the green border: float:right

(and remove the absolute positioning on these elements if present)

Result:

Upvotes: 1

Dev
Dev

Reputation: 791

float you sidebar to left; and take the position:absolute off from the main div and float it left as well. So it looks like below and this should sort it out.

#sidebar{
/*your styles*/
float:left;
}

#maindiv{
/*yourstyles*/
/*postition:absoulte;*/
float:left;
}

Upvotes: 0

cusimar9
cusimar9

Reputation: 5259

The problem is your div 'pics' is absolutely positioned so the footer div is positioned relative to all other relative divs on the page.

You shouldn't use absolutely positioned divs who's size affects other content on the page, ideally not at all

Upvotes: 0

Related Questions