Two side-by-side divs

See more:

CSS

HTML

Hi,

I'm looking to create a page where the left and right divs both fit the width and height of their content, while not 'collapsing' the height of the parent div. With the following code, it looks visually correct but the parent div has a height of 0 and that shouldn't be the case - it could cause issues down the line. The page needs to be completely dynamic, meaning there could be any amount of content in both divs, meaning their heights need to dynamically fit the contents. There could also be images of varying sizes in the right div, so it needs a dynamic width depending on the content. The left div will just fill the rest of the space in that case.

It's important that the left div does indeed fill the remaining space as it may have a background colour which will be visibly short if not.

<div id='page_contents'>
	<div id='page_left'>
		<p>
			This is a <a href='paragraph'>paragraph</a>.
		</p>				
		<p>
			This is another paragraph.
		</p>
	</div>
	<div id='page_right'>
		something here
	</div>
</div>

#page_contents
{
	position: relative;
}

#page_left
{
	float: left;
	color: rgb(43, 43, 43);
	width: 85%;
	margin: 0 16px 0 0;
}

#page_right
{
	width: 15%;
	height: 1000px;
	border: 1px solid black;
	position: absolute;
	right: 0;
}

What I have tried:

-----------------------------------------------------------------------