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.

[Excavator]

Hello Windbrand,
I have a demo that shows that here.

[Windbrand]

I checked that demo but the width of the container is not dynamic as I resize the browser window. I need the container to stretch in width when the browser window has high resolution, but the left/right columns to be fixed in width.

[Excavator]

Originally Posted by Windbrand

I checked that demo but the width of the container is not dynamic as I resize the browser window. I need the container to stretch in width when the browser window has high resolution, but the left/right columns to be fixed in width.

Try making this change highlighted in red -

#container {
	/*width: 1000px;*/
width: 80%;
	margin: 30px auto 900px;
	background: #999;
	overflow: auto;
	font-size: 0.8em;
}

To explain further, remove or comment out that width: 1000px; that sets #container to a fixed width.
Put in your 80% width with this line - width: 80%;

[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 files.
(btw just using a test image for the right column)

[Excavator]

Look at what happens when you change the order in the markup, remember - floats come first.

<!DOCTYPE HTML>
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>

	<link href="test.css" rel="stylesheet" type="text/css">


</head>

<body>
<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>
		
		<img class="rightverticalimage" src="http://api.ning.com/files/GTfAIob4Rdv8a6DlFSc9WysVp-JgbpduT7uYIE8j1ikuGsgC-29xobgn8H0TmQ9BToHy0hy9EZThN*qhBF9Kqs0MJs0O-XQJ/musicnotes.jpg" alt=""/>
		
		<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>
		

	</div>

</div>
</body>
</html>

...
The next step would be to validate both your CSS and your Markup. Have a look at the links in my signature about validation.


.

[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

[Obsidian]

I could suggest using min-width for this setting. The sample below is flexible to the screen size, however when the screen shrunken the boxes will not shrink below 200px. I use a similar column layout for my site (you're welcome to check out the site's code, it's linked from my profile) to ensure no blank spaces when the screen is shrunken and that everything stays in place. It will be very difficult to have the middle section automatically adjust with the rest of the page based on percentage without the other two columns falling under it, because of the float value and the space available.

<html>
<head>
<style>
#box1 {
float: left;
background: red;
width: 40%;
min-width: 200px;
margin-right: 25px;
}
#box2 {
background: black;
float: left;
width: 40%;
min-width: 200px;
}
</style>
</head>
<body>
<div id="box1">text</div>
<div id="box2">text</div>

</body>
</html>

I hope this helps.

[Windbrand]

Thanks!
Excavator is right, switching the order of the float elements in the html worked.