CSS: position:absolute div inside position:relative div -- what am i doing wrong?

Question

after reading this article:

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

i am trying to achieve vertically stacked divs each containing 2 child divs positioned to the far left and right of each parent div. i found the same concept here:

Position absolute but relative to parent

but I can't figure out why mine isn't working.The in-progress file can be viewed here:

https://dl.dropbox.com/u/10388895/newPeterSalvatoDotCom/index.html

Any help would be greatly appreciated.

please include the relevent code in your question. – bhamlin Jul 24 '12 at 00:14 — bhamlin, Jul 24 '12 at 00:14

score 0 · Answer 1 · edited Apr 09 '13 at 16:50

0

I think setting these rules to the .projectDivs class get what you want done. Let me know if they don't.

.projectDivs {position: relative;
    margin-bottom: 50px;
    clear: both;
    float: left;
    margin-left:auto;
    margin-right: auto;
    width: 100%;
}

i set the margins individually because you have a margin bottom set already.

edited Apr 09 '13 at 16:50

Rob

4,927
12
49
54

answered Jul 24 '12 at 00:20

Rooster

9,954
8
44
71

got it sorted, but thanks for taking the minute to take a look. – peter Jul 24 '12 at 00:26

score 0 · Accepted Answer · answered Jul 24 '12 at 00:21

0

One way to fix this would be to give the projectDivs a height. They currently collapse to 0. Add the following to your stylesheet and see what happens:

.projectDivs{height:600px}

answered Jul 24 '12 at 00:21

ACJ

2,499
3
24
27

That worked like a charm. I didn't realize the divs would collapse when the contents were absolutely positioned... but it makes sense since they are taken out of the document flow... Thanks. – peter Jul 24 '12 at 00:25

CSS: position:absolute div inside position:relative div -- what am i doing wrong?

2 Answers2