Divs that move higher from a point when more are added?

[skip88]

So I’m working on a website of mine that needs a varying amount of content boxes (divs with content in) per page.

The way I want them to display however, is the catch. So I’ll explain what I want first, and then show what I’ve done at the moment.

What I want
I want them to display at around 10% from the bottom of the user’s page. And be anchored to that point.
So no matter what size the browser window is, the content will be fairly similarly laid out (within reason).

SO. If a page needs only one content box (one div with content in), I want the bottom left corner of that div to be 10% up the users browser window from the bottom of the page.

BUT. Then if I want 2 divs of content on that page, I want the 1st div to be pushed up the page by the 2nd, and have the 2nd div’s bottom left corner 10% up the user’s page.

And then with the same pattern every time I add another div.

So to try and make sure you get it, I drew these.

On a page that needs 1 content box – http://img163.imageshack.us/img163/945/1div.jpg
On a page that needs 2 content boxes – http://img715.imageshack.us/img715/33/2divs.jpg
On a page that needs 3 content boxes – http://img693.imageshack.us/img693/1484/3divs.jpg

So what I’ve done
Is.. used a container div that is situated at that point of the page that I want the divs to align from.

But because I failed at trying to relatively position them, I just positioned them with absolute values. Which is far too rigid for what I need.

At the moment it has 3 divs to show the process I want. The 1st content div obviously then has to stay at the bottom, so I need to move my content to other divs when I want to add something below an existing one.

Another problem/requirement is that if one of the divs has more lines of content than the other, big inconsistent gaps emerge. So depending on the size of the div, it would need to get pushed further, or less, up the page.

HTML

Code:

abc

def

ghi

CSS

Code:

#content-container {
width: 1px;
height: 1px;
position: absolute;
bottom: 10%;
left: 10%;
}

#content1 {
width: 600px;
height: 10px;
position: absolute;
bottom: 110px;
}

#content2 {
width: 600px;
height: 10px;
position: absolute;
bottom: 250px;
}

#content3 {
width: 600px;
height: 10px;
position: absolute;
bottom: 390px;
}

Basically I want it to be flexible, rather than rigid.

Which I had hoped could be fixed with relative positioning, but I couldnt manage that.

[skip88]

Well. What I’ve had off another site is this solution.

But it doesn’t cover everything.

Code:

content 1

content 2

content 3

This does succeed in putting the content divs at 10% from the bottom of the page, but they are then 10% apart from each other once there is more than one on the page. When the gap I’d like in between the individual content boxes is about 20px. (didnt mention that..)

And lastly. The actual content I’m using in the content divs include an image for some of them. Which I had floated to the left. With, float: left, on though, the image bleeds out of the bottom of the div. But when I delete the float style, the text that’s next to it obviously no longer wraps itself around the image. Only one line of text is displayed next to the image, the rest is then put below it.

[Author]

Posts