Resizing columns

[ChrisRChamberlain]

Hi all

The following code defines three fixed width columns in an HTML page

<style>

.leftcol {
position: absolute ;
left: 0px;
top: 100px;
width: 110px;
margin: 0x;
padding: 0x;
border: 0px solid black;
background-color: #cdf9fc;
z-index:-100;
}

.middlecol {
position: absolute;
margin-left: 110px;
top: 100px;
width: 560px;
padding: 0px;
border: 0px solid black;
background-color: #ffffff;
z-index:-100;
}

.rightcol {
position: absolute;
margin-left: 670px;
top: 100px;
width: 130px;
padding: 0px;
border: 0px solid black;
background-color: #cdf9fc;
z-index:-100;
}
</style>

What modifications to the code are needed so that .middlecol.width becomes browser width minus .leftcol.width minus rightcol.width, (110+140), when resized?

Following that, what modifications to the code are needed so that .rightcol.margin-left becomes .leftcol.width plus middlecol.width when resized?

TIA

FAQ184-2483 - the answer to getting answered.​

Chris

http://www.pdfcommander.com

http://www.pdfcommander.co.uk

 

[Vragabond]

Ok, hope I understood your question correctly. This will define fixed left and right col and the middle col will be adjusted to the screen size:

<style>
#page {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: auto;
	padding-left: 120px;
	padding-right: 140px;
}

#leftcol {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 110px;
	height: 200px;
	background: #cdf9fc;
}

#rightcol {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 130px;
	height: 300px;
	background: #cdf9fc;
}


</style>

<div id=&quot;page&quot;>
 <div id=&quot;leftcol&quot;></div>
 Main page text.
 <div id=&quot;rightcol&quot;></div>
</div>

For the second one, I am sure you can just rearrange the percentages/fixed widths. Hope it helps.

 

[ChrisRChamberlain]

Vragabond

Thanks for your response.

The right column is at 0 left as there isn't a left value otherwise it works.

FAQ184-2483 - the answer to getting answered.​

Chris

http://www.pdfcommander.com

http://www.pdfcommander.co.uk