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:

<div class="paperstrip">
	<div class="shadowleft"></div>
	<div class="content"><p>content here</p></div>
	<div class="shadowright"></div>
</div>

<div class="paperstrip">
	<div class="shadowleft"></div>
	<div class="content"><p>content here</p></div>
	<div class="shadowright"></div>
</div>

Finally, I thank everybody for their time.