How do I set up three columns like this?

[windbrand]

Does anyone know how I would get a page set up like this?


http://i.imgur.com/cxLmGkl.png

.pagecontainer {
margin-top:50px;
padding-left:50px;
padding-right:50px;
position:relative;
width:80%;
height:450px;
}
.leftcolumn {
width: 250px;
}
.middlecolumn {
margin-left:250px;
padding-left:25px;
margin-right:300px;
padding-right:25px;
float:left;
display:inline;
}
.verticalimage {
float:right;
display:inline;
width:300px;
}

<div class="pagecontainer">

    <div class="leftcolumn">text <br> text <br> text</div>

    <div class="middlecolumn">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lorem velit. Nullam et metus eget nunc egestas laoreet et quis ligula. Vivamus lobortis sodales pulvinar. Nunc malesuada pretium ornare. Aliquam ut erat at magna pellentesque elementum. Fusce facilisis lorem et tortor euismod bibendum.</div>

    <img class="rightverticalimage" src="picture1.png"/>

</div>

- A page container with dynamic width of 80% of browser window
- Inside it are 3 sections:
- Left text column of 250px width, 50px margin to the left against pagecontainer
- Right column is an image of 300px width, 50px margin to right against pagecontainer
- Middle column is whatever space that's left in the middle, dynamic width

I've tried various combinations of floats and display types (block, inline-block, etc) but can't get it to work. The vertical image keeps getting bumped below the middle column of text.

Thanks.

[ankush]

post your css

[Beverleyh]

If you could post a link to your sample page (what you have so far), that would be great.

[windbrand]

Yes sure, first post updated.

[ankush]

try this

.pagecontainer {
margin-top:50px;
padding-left:50px;
padding-right:50px;
position:relative;
width:80%;
height:450px;
}
.leftcolumn {
margin-left: 50px;
width: 250px;
float:left;
}
.middlecolumn {
float: left;
margin: 0 10px;
width: 390px;
}

.right_col {
	width:300px;
	float:right;
	margin-right: 50px;
	}
.right_col img {
	float: right;
        width: 300px;
	}

<div class="pagecontainer">

    <div class="leftcolumn">text <br> text <br> text</div>

    <div class="middlecolumn">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lorem velit. Nullam et metus eget nunc egestas laoreet et quis ligula. Vivamus lobortis sodales pulvinar. Nunc malesuada pretium ornare. Aliquam ut erat at magna pellentesque elementum. Fusce facilisis lorem et tortor euismod bibendum.</div>

    <div class="right_col"><img src="img.jpg" /></div>

[coothead]

Hi there windbrand,

check out the attachment, to see a possible solution.

coothead

[windbrand]

Thanks I've tried that on my page but it won't work still. It's really weird your test page works perfectly, I pretty much copied over the code on mine but it still won't work...
Here is my code:

.pagecontainer {
	overflow-y:auto;
	overflow-x:hidden;
	background: transparent url(pagecontentoverlay.png);
	width:80%;
        min-width:800px;
        padding:30px 0;
	height:500px;
	margin: 0 auto;
	font-size:12px;
	color:#999;
}

.pagecontainer>div{
	padding-left:50px;
	padding-right:50px;
	position:relative;
}

.middlecolumn {
	padding:10px;
    margin:0 300px 0 273px;
}

.rightverticalimage {
	float:right;
    width:200px;
    padding:10px;
}

.leftcolumn{
	float:left;
    width:250px;
    padding:10px;
	font-size:16px;
	text-align:left;
	border-right:thin solid #fff;
}

<div class="pagecontainer">

	<div id="lisztwork3page">
		
		<div class="leftcolumn">
			<a href="#lisztpage" class="link_expandContainer" onclick="return false">Back to main</a>
			<p>
			<font size="-1">
			<a href="#lisztwork1page">Hungarian Rhapsody No.2</a>
			<p>
			<a href="#lisztwork2page">La Campanella</a>
			<p>
			<b>| Transcendental Etude No.4 |</b>
			<p>
			<a href="#lisztwork4page">Transcendental Etude No.5</a>
			<p>
			<a href="#lisztwork5page">Transcendental Etude No.8</a>
			</font>
			<p>
		</div>
		
		<div class="middlecolumn">
			<b>Transcendental Etude No.4 "Mazeppa"</b>
			<br>
			<br>
			<br>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus justo eget lorem porta iaculis. 
			Fusce dictum ipsum in turpis pellentesque pellentesque. Pellentesque facilisis, nulla sed suscipit dignissim, 
			lacus sem dictum ligula, vel facilisis neque mi eu purus. Sed quis erat velit, sit amet volutpat urna. Aliquam erat volutpat. 
			Cras purus diam, volutpat porttitor blandit sit amet, tempor et risus. Aenean pharetra nisi quis nisi vestibulum ut molestie 
			lacus aliquam. Curabitur vitae nisi orci, quis dapibus mauris. Sed leo magna, facilisis eget auctor non, pharetra ac mauris. 
			Vestibulum massa felis, tincidunt ac tristique ut, tincidunt nec tortor.
		</div>
		<br>
		<br>
		<br>
		
		<img class="rightverticalimage" src="http://api.ning.com/files/GTfAIob4Rdv8a6DlFSc9WysVp-JgbpduT7uYIE8j1ikuGsgC-29xobgn8H0TmQ9BToHy0hy9EZThN*qhBF9Kqs0MJs0O-XQJ/musicnotes.jpg" alt=""/>

	</div>

</div>

I have no idea what's wrong :/
I have uploaded the test file.
(btw just using a test image for the right column)

[coothead]

Hi there Windbrand,

when I try to open your attachment with "WinZip", I get this message...

Cannot open file: it does not appear to be a valid archive.

I would have added yours to mine, not the other way round.

coothead