[solved] Making two divs appear alongside

[s300pmu1]

Hi good people of CSS-tricks,

Objective: make curved-paper-strip-looking boxes with content, set them side-by-side

Implementation:
– each paper-strip is a div with two child divs for left and right shadow and a child div for content
– width of parent div changeable, height is not (background-image is used to load shadow.png to de-clutter html)

Problem:
– Everything looks fine so far, BUT I can’t get the several parent divs side-by side – each one appears only below the previous. I suspect it has to do with positioning or some other property interaction, but I am a total noob so can’t figure it out myself.

Questions:
1. What have I done wrong and, if brief explanation is possible, how to right it?
2. Is there a better way to do the whole thing (i.e. make a div with side-shadows and content) than what I did by a mix of trial and error and intuition?

Illustration: use this link to see images of the abovementioned

Code:

-CSS:

.paperstrip {

position:relative;

height: 315px;

width: 270px;

clear:none;

}

.shadowleft {

position:absolute;

background-image: url(shadowleft.png);

background-repeat: no-repeat;

top:0;

left:0;

height:100%;

width: 42px;

}

.shadowright {

position:absolute;

right:0;

top:0;

background-image: url(shadowright.png);

background-repeat: no-repeat;

height:100%;

width: 42px;

}



.content {

position:relative;

top:0;

left:0;

height:100%;

padding-left:50px;

padding-right:50px;

}

-HTML:

content here












content here

Finally, I thank everybody for their time.

[lukewilde]

Could try adding float: left; to .paperstrip

[s300pmu1]

Lukewilde, thanks for the now obvious tip (kind of the same situation as with your “overflow:hidden” issue)!
Sleep deprivation does impair judgement.

If anyone can comment on question 2 – I’d appreciate greatly.
As far as I can see, current approach has following drawbacks:
– PNGfix for IE lees than 7 can’t be applied, AFAIK, as shadow image is loaded as div.background-image, not an inline image – correct me if I’m wrong
– for same reasons as above, can’t resize the background shadow, so the whole thing is only flexible in width, but not in height — is the only way to change that loading the shadow image in HTML as img not in CSS as background-image?

Are there any obvious design flaws?

[Author]

Posts