New Member - Divs utilising space

Hi all I wonder if you can help.

I am trying to create an effect similar to Pinterest.com.

If you visit designercurtains.biz/screen.png you will note that the divs do not like doing this style.

Scarf should be under dog bandana, and jeans should be under cushion. Is there a simple way of making the divs use the available space?

Each box is a div classed as 'frame'.



Thanks in advance.

give the .frames a height.
and make sure the content is being limited by the serverside script

Thanks for your help aeternus.

I've given the divs heights but 'Jeans' doesn't use up the space between itself and Cushion.

See designercurtains.biz/screen2.png

Also when I increase the height of Pillow, it pushes scarf and jeans to the right and down another line...

And I'm not sure how I make sure the content is being limited by serverside script...

sorry!

Hi rdbrotherton,

I understand that you are testing this locally, but without seeing any mark-up and how your declared styles are applied to it, no one can really help.

If you want me to check it out, post a link to a online page where you say you applied the style and it is not working for some reason.


See ya

- as for limiting stuff server side. depending on the cms you are using this should be done in the backed. If not, just tell these client that they should limited the amount of characters used. Or more use:
.frame{ overflow:hidden} this will cutt off extra stuff. But that might not be so pretty.

aeternus,

Thanks for your help so far its most appreciated.

I've uploaded the index and css file to rdb.x10.mx/de

As you can see, jeans wdoes not move up below cushion, it sits on its line. If I increase the size of pillow (frame3) it pushes both scarf and jeans down even further.

Do you think I going to have to use position absolute attributes to achieve the look I want?

Thanks again.

Position absolute is by far the last thing you should look at. Position absolute takes elements out of the normal flow of the document. To get the desired result with that you will have to do a lot of extra coding.

Let keep it efficient.
I see that you assigned a height to .frame1 .frame2 .frame3 .frame4 They all have a hieght of 250px; except for .frame2

So if you remove the height from all these frames and just combine them in 1 rule it is much more efficient (the same is true for all your other properties, combine everything if they use the same stuff, it saves you time money, bandwidth and troubles


Hope this helps! good luck!

-edit: ones you gave all these frames the same properties you can if needed overwrite this by a simple statement like

Thanks mate, I'm quite new to CSS, and while I know some of the basics, stuff like house keeping I haven't done much on.

So to be clear, it would take quite a bit of coding to get my frame divs to position the way I want them?

Thanks again.

I cant really respond good because i destroyed my motherboard. Anyway added th div should take you 1 min

CSS alone is not sufficient to do what you seem to want with dynamic content. The jQuery Masonry plugin can be used for that, however.


Ouch. How'd that happen? What brand was your MB?

a facking expensive dell xps :-P damn frauds ;-) prolly a cheap *** mb ;-) i might have played to much games ii guess B-)

That is exactly what I'm after. Thank you both for all your help. I'll definitely come here again if have another problem!

Cheers.