Hello everyone, relatively new web developer seeking help! I'm working on a template that will eventually be used with Joomla, but right now I'm just concerned about getting the layout to work with just the HTML and CSS. A little background first:

I want to create a fixed frame around the webpage that expands and contracts to fit different resolutions and browser window resizing, and then have the content scroll inside of that frame. The frame is also comprised of transparent PNG's since the client wanted lots of art on the frame around the content. My solution to keep the graphical layout liquid was to chop the frame up into 3 bits: the left side that was absolutely positioned to the left side of the screen, a right side that was similarly positioned to the right, and a thin strip that could be repeated horizontally as much as necessary to fill the gap in between.

Right now It mostly works in Firefox, and is a giant mess in IE, but that's a whole other problem that I'll deal with after. I'd like to get it working in the standards compliant browsers first and then figure out some hacks that I can use for IE. Hopefully I can do that....

Here is my HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  <TITLE>Site Test</TITLE>
  <link rel="stylesheet" type="text/css" href="site_test.css" />

<div id="wrapper">

<div id="frame_left">
</div><!--End frame_left-->

<div id="logo">
</div><!--End logo-->

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

etc, etc, 

</div><!--End content-->

<div id="frame_right">
</div><!--End frame_right-->

</div><!-- End wrapper -->

Here is my style sheet:

#wrapper {
	margin: 0px;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	background-image: url(frame_middle.png);
	background-repeat: repeat-x;
	z-index: 10;

#frame_left {
	margin: 0px;
	background-color: transparent;
	background-image: url(frame_left2.png);
	background-repeat: no-repeat;
	width: 224px;
	height: 625px;
	position: fixed;
	left: 0px;

#frame_right {
	margin: 0px;
	background-color: transparent;
	background-image: url(frame_right2.png);
	background-repeat: no-repeat;
	width: 198px;
	height: 625px;
	position: fixed;
	right: 0px;
	top: 0px;
	z-index: 25;

#logo {

	margin: 0px;
	background-color: transparent;
	background-image: url(pink_logo2.png);
	background-repeat: no-repeat;
	width: 316px;
	height: 125px;
	position: fixed;
	top: 0px;
	left: 34.5%;
	z-index: 75;

#content {

	position: fixed;
	top: 145px;
	bottom: 60px;
	left: 160px;
	right: 150px;
	width: auto;
	height: auto;
	overflow: auto;

In FireFox everything works in terms of positioning and the scroll bar pops up, but won't actually scroll anywhere, even though there is content off screen? Any thoughts?

I am slightly concerned that this is just totally undoable, but then I look at some of the stuff on CSS Zen Garden and think that there must be a way to pull it off!

Any help is very, very much appreciated.

Recommended Answers

All 5 Replies

Hi there,
Try changing your style for #content, set attribute overflow to scroll.
Hope this helps

Yes I have tried that, same issue. Scroll bar appears, but I can't actually scroll anywhere, the content is stuck. I'm wondering if it has something to do with the #content part being in a fixed position?

I've uploaded the files since I think I'm not explaining well what I'm trying to do. LOL Here is the link, please only use Firefox since IE is not liking it at all right now. One hurdle at a time...


I want there to always be that frame around the screen, I would like it to be able to expand and contract with browser size/resolution, and I want the content to be scrollable. Right now the scroll bar is appearing but I can't make it move!

This is the most complex project I've worked on so far (and it's not even that complex, I don't think LOL) and it's definitely challenging me!

In IE you need a position: relative; on your overflow:scroll div.
It solved my problem at least.

You're left and right frames both have the z-index property. The content division does not, which would place it beneath those frames. By the way, the problem doesn't occur on Mac's Firefox.

To fix Chrome simply give your content division a height (around 62% should do it). It should fix things up in Safari and Opera too.

Regards, Arkinder

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.