CODEWITHSUNDEEP
htmlcss
deXter
deXter

Reputation: 354

How to stack relative positioned divs?

I am facing a problem: I have a div tag and images of 100px width each on both sides of the div. Now I want to add a number of div tags stacked over each other in the middle of it and they have to be fluid (using % width) and relative to support multiple resolutions. How can I do it?

JSFiddle Code

Upvotes: 1

Views: 3103

Answers (2)

ptriek
ptriek

Reputation: 9276

Something like this? You'll need a hell of a lot of empty spaces though to make them fill the width...

EDIT:

New fiddle with fluid width: http://jsfiddle.net/BXW8y/1/

Upvotes: 0

ScottS
ScottS

Reputation: 72261

The only way to do that with the center being position: relative is by knowing the height of the center divs and adjusting margin-bottom of the div immediately above. Look at http://jsfiddle.net/XMkDt/10/ (this is only a single line, not very useful), and http://jsfiddle.net/XMkDt/26/ (this is equal height divs, but could be adapted to accommodate different heights; note: on my FF win7 the border's align correctly but the text is tweaked by a pixel and I'm not sure why--but for your purposes, it would work).

Note: you would want to make sure z-index: 1 was set to the div that you are actually showing at the time (as you make your opacity change), to lift it above the other divs.

Upvotes: 3

Related Questions