1

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

Yisela
  • 6,909
  • 5
  • 28
  • 51
deXter
  • 354
  • 4
  • 21
  • negative `margin`s and positive `z-index`es applied to the elements you want to overlay? Also, don't forget that you can place an element with `position: absolute` inside an element with `position: relative` and it can be placed absolutely within its parent without affecting the positioning of its relatively-positioned siblings. – Aaron Dec 07 '11 at 17:11
  • Difficult to answer without any code, but if you want to overlay divs they should be position:absolute with different top left for each – Yisela Dec 07 '11 at 17:12
  • Actually i am using margin-right:100px and margin-left:100px,if i use absolute i get undesired effect and if i use relative positioning the space that was actually being used by those divs will be blank. – deXter Dec 07 '11 at 17:13
  • Please make a http://jsfiddle.net/ with your code, can't picture what you need just with that. – Yisela Dec 07 '11 at 17:30
  • what do you want the other divs to overlay? Do you want them to just overlay the center div or the center div and the image divs? – CBRRacer Dec 07 '11 at 17:32
  • i want all the center divs to be displayed one over the other so that i can selectively show them later using opacity...i want the center1,2,3,4 to be in the center of content 'div' overlayed on each other. And the width should be 100% - 100px on each side...i hope you get me – deXter Dec 07 '11 at 17:35
  • yes, that's not overlay, that's one on top of the other or stacked as you said :) – Yisela Dec 07 '11 at 17:52
  • This might help: http://stackoverflow.com/a/1909682/1034619 – Sean Lerner Dec 07 '11 at 18:01

2 Answers2

3

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.

ScottS
  • 71,703
  • 13
  • 126
  • 146
  • good answer, I didn't know height was all it took to put relative in relative – Yisela Dec 07 '11 at 18:03
  • Well, its not just the height, its knowing that so you can offset it the correct distance with the bottom margin. – ScottS Dec 07 '11 at 18:08
  • As relative keeps the space for the element at the original position,wont that change the positioning of the following divs?? – deXter Dec 07 '11 at 18:11
  • No, because the div is not being moved relative to itself (as when you do `top: -100px` or some such) this leaves the "gap" where the element was "inflow." By using just negative margin, it is moving the whole relative element as a unit (the div's could be `static` and it would function just the same, but you want `relative` most likely so you can set a `z-index` on the elements). – ScottS Dec 07 '11 at 18:16
  • thanks for the answer,but can you please tell on what basis the -222px value was decided,will surely clear my concept. – deXter Dec 07 '11 at 18:22
  • In my example it is the height (200px) + padding (top and bottom of 10px each) + border width (top and bottom of 1px each). – ScottS Dec 07 '11 at 18:27
0

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/

ptriek
  • 9,040
  • 5
  • 31
  • 29
  • The problem that i wanted solution for still persists in your answer.If i decrease the width of browser the center div gets behind the right image rather than being fluid and adjusting. – deXter Dec 07 '11 at 18:01
  • no it doesn't - at least not if i add some extra spaces between the  's http://jsfiddle.net/BXW8y/1/ – ptriek Dec 07 '11 at 18:08