Absolute position inside relative position div

[apower]

I read Chris’s article yesterday which was very helpful for me to understand the concept of positioning absolute children inside a relative parent. See:https://css-tricks.com/791-absolute-positioning-inside-relative-positioning/

But I’m having trouble implementing it. Maybe someone could help me with this. I’m new to CSS and I’m working on my portfolio site and stuck with this part.

I have two rows of fairly similar sized images, and I want to position a bigger box equal in height to the other two rows to go to the right. I’ve given all these images a class of absolute and I’ve wrapped them in a class of relative.

What I end up with is two rows on top of each other and the big box going underneath instead of to the right. Any ideas?

Here’s the css:

.relative {
padding: 5px 0 0 5px;
position: relative;
min-width: 970px;
min-height: 173px;
}

.absolute {
position: absolute;
left: 0; top: 0;
}

[wolfcry911]

Hi apower, we really need more information (a link to a test page would be best, but post the html in the very least). An image of what you’re trying to accomplish would help as well.

As is, all the images will stack on top of one another – they’re all positioned to the same point. You don’t show anything of the wrapping element or box to the right?

[apower]

Thank you. You can see the “elsewhere” or social networking section on my page at:
http://twitpic.com/5g6kcn

And here’s the html:

And I changed the CSS offsets and it didn’t make any difference. Now it looks like this:

.absolute {
position: absolute;
left: 0px; top: 0px; right: 30px; bottom: 50px;
}

[wolfcry911]

the html didn’t post for some reason…

If each image has the same class, then they each are positioned to the same point, in effect stacking on one another. Looking at the image, I don’t think relative and absolute positioning is the best to use here. I’d put the all the images in a single list and just float them left. The ul could be given a width and floated left as well, then box to the right will follow.

[apower]

Thanks, it makes sense they would stack with one class. That’s very helpful. I was trying the floating thing and for some reason the twitter box would go to the next line underneath the other icons. I got it to work for my nav and the gallery but not the social section. Maybe I should try it again putting them in a ul.

I appreciate your help.

[apower]

I fixed the html so it shows now.

[wolfcry911]

I would do something along these lines:

Twitter Stream


Lorem ipsum.Date, via Tweetdeck


Lorem ipsum.Date, via Tweetdeck






 







#social ul {

margin: 0;

padding: 0;

list-style: none;

width: 640px;

float: left;

}



#social ul li {

float: left;

padding: 10px;

}

[Author]

Posts