Scrolling in middle panel

HTML & CSS
1

Hi,

I’d like to have a vertical scrollbar in the middle, however my CSS doesn’t do this. Instead, the text disappears underneath if there is no more space.

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	color: #000000;
	background-image: url('bg.jpg');
	background-position: center top;
	background-repeat: no-repeat;
	text-align:center;
}

.content {
	min-height: 100%;
	position: relative;
	overflow-x: hidden;
	/*overflow-y: hidden;*/
	z-index: 0;
	background: rgb(0, 0, 0);
	background: rgba(255, 255, 255, .6);
	font-family: Century Gothic, sans-serif;
	line-height:20px;
	letter-spacing: 3px;
	width: 1200px;
	display:  inline-block;
}

.background {
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	
}

.top_block {
	width: 100%;
	display: block;
	background-color: #FFFFFF;
}

.bottom_block {
	position: absolute;
	width: 100%;
	display: block;
	bottom: 0;
	
}

.left_block {
	display: block;
	float: left;
	
	
}

.right_block {
	display: block;
	float: right;
	
}

.center_block {
	display: block;
	width: auto;
	
}

.block_1 {
	width: 100%;
	height: 200px;
}

.block_2 {
	width: 100%;
	height: 30px;
		
}

.block_3 {
	width: 100%;
	height: 80px;
	
}

Another question is with the transparent background colour, I only want the middle block 2/content block to have transparent background colour. How would I go about this? I’ve noticed if I change the colour, the header and footer also gets changed.

Thank you.

2

.classname {overflow-y:scroll}

Your code looks like it has several opportunities for improvement. If you would like to post a working page (starts with <doctype>, ends with </html>) showing the HTML and CSS together, or a link to your page if it’s on a server, we might be able to help. Click the link at the bottom of my post for more information about posting code.

I would rather see your HTML and CSS together before trying to address the background color question.