No replies
dcuellar
Offline
newbie
Last seen: 12 years 4 weeks ago
Timezone: GMT-4
Joined: 2009-10-30
Posts: 1
Points: 2

Hello,
I'm new here. I stumbled across your site after hours of looking for a solution to my problem. I've tried not to ask because I really want to learn, but I've reached my boiling point with this. Big smile

I'm trying to have a three row layout. Each row is a div with a table within. Here is my HTML simplified:

<body>
 
<div class="head">
	<table>
		<tr>
			<td class="top_left">left</td>
			<td class="middle_top">middle</td>
			<td class="top_right">right</td>
		</tr>
	</table>
</div>
 
<div class="middle">
	<table>
		<tr>
			<td class="middle_left">left</td>
			<td class="pageContent">middle</td>
			<td class="middle_right">right</td>
		</tr>
	</table>
</div>
 
<div class="footer">
	<table>
		<tr>
			<td class="bottom_left">left</td>
			<td class="middle_bottom">middle</td>
			<td class="bottom_right">right</td>
		</tr>
	</table>
</div>
 
</body>

And here is my css:

*{
padding:				0;
margin:					0;
}
 
body{
background:				url('images/bodyback1.jpg') center repeat-y;
width:					100%;
max-height:				100%;
min-height:				100%;
font-family:			'Trebuchet MS', Arial, Helvetica, sans-serif;
}
 
table{
width:					100%;
border-collapse:		collapse;
}
 
/*
Head Content
*/
 
.head{
width:					80%;
margin-left:			10%;
margin-right:			10%;
}
 
.top_left{
background:				url('images/top_left.jpg') no-repeat top left;
width:					127px;
height:					200px;
}
 
.middle_top{
background:				url('images/middle_top.jpg') repeat-x top;
height:					200px;
}
 
.top_right{
background:				url('images/top_right.jpg') no-repeat top right;
width:					127px;
height:					200px;
}
 
/*
Middle Content
*/
 
.middle{
width:					80%;
margin-left:			10%;
margin-right:			10%;
}
 
.middle_left{
background:				url('images/middle_left.jpg') repeat-y left;
width:					127px;
}
 
.pageContent{
background:				url('images/white_repeat.jpg') repeat;
}
 
.middle_right{
background:				url('images/middle_right.jpg') repeat-y right;
width:					127px;
}
 
/*
Footer Content
*/
 
.footer{
width:					80%;
margin-left:			10%;
margin-right;			10%
}
 
.bottom_left{
background:				url('images/bottom_left.jpg') no-repeat bottom left;
height:					200px;
width:					127px;
}
 
.middle_bottom{
background:				url('images/middle_bottom.jpg') repeat-x bottom;
height:					200px;
}
 
.bottom_right{
background:				url('images/bottom_right.jpg') no-repeat bottom right;
height:					200px;
width:					127px;
}

I'm going to put a scrollable div within the page content which I want to expand to the size of the available space. If I place a px value it will work, however different screen resolutions will cause the whole page to scroll. I don't want the whole page to scroll, instead I want only the div in the middle to scroll.