16 replies [Last post]
Goodcoin
Offline
newbie
Tbilisi, Georgia
Last seen: 13 years 35 weeks ago
Tbilisi, Georgia
Joined: 2009-05-23
Posts: 8
Points: 0

I'm trying to move from my current table/frame design to CSS with PHP includes, and I almost succeeded, having built a test CSS layout page which repeats my elastic frame-based layout almost identically. But I'm stuck with a nasty issue, which involves vertically scrollable columns with 100% height. For some reason the divs extend far below the browser's visible area (tested in many different browsers). Could you please look at my test page and tell me, what am I doing wrong?

http://www.rezo.ge/cssframes.htm

Here's the code (just stripped extra "lorem ipsum" which is needed for the scrollbars to appear):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>CSS Frames Test Page</title>
	<style type="text/css" media="screen, print">
html,
body {
	margin:0;
	padding:0;
	height:100%;
	overflow:hidden;
}
html>body #wrap {height:100%;}
#header {
	width:100%;
	height:108px;
	background:#999999;
}
html>body #header {
	position:relative;
}
#sidebar {
	background:#CCCCCC;
}
html>body #sidebar {
	width:175px;
	height:100%;
	position:relative;
	overflow:auto;
	float:left;
}
html>body #content {
	height:100%;
	position:relative;
	overflow:auto;
}
#footer {
	width:100%;
	height:30px;
	background:#000000;
}
html>body #footer {
	position:fixed;
	bottom:0px;
}
	</style>
</head>
<body>
<div id="header"></div>
		<div id="sidebar">
        <p>Lorem ipsum...</p>
            </div>    
    	<div id="content">
	<p>Lorem ipsum...</p>
            </div>
	<div id="footer"></div>
</body>
</html>

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 12 years 12 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

Position - fixed

It is not that your colums are extending out of the screen, it is your footer covering them up because you are using position:fixed.

It is far better to have everything floating. Make the header float left, then have your main content clear both, then float left, and then clear both for your footer. This will make your footer start after everything else is finished.

It is good to break your page into three blocks like that, header, main and footer. You can then have floats, within your main blocks, which will allow you to keep the design how you want it.

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

Goodcoin
Offline
newbie
Tbilisi, Georgia
Last seen: 13 years 35 weeks ago
Tbilisi, Georgia
Joined: 2009-05-23
Posts: 8
Points: 0

Thanks for you reply.

Let's forget about the footer for a while. I have deleted it entirely, but the scrollable divs are still visible only partially. I can't see the bottom scroll arrows, they are below the visible area. If you take a look at the page with deleted footer, you'll see that even without it the problem remains:

http://www.rezo.ge/cssframes.htm

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 12 years 12 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

See below. It fixes it in my

See below. It fixes it in my screen, but will vary depending on the user's monitor size. If you adjust the height given to the html element it adjusts the overall size, which is what was causing your problem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>CSS Frames Test Page</title>
	<style type="text/css" media="screen, print">
 
html {
margin:0;
	padding:0;
	height:80%;
	}
body {
	margin:0;
	padding:0;
	height:100%;
}
 
#header {
	width:100%;
	height:108px;
	background:#999999;
}
 
#sidebar {
	background:#CCCCCC;
}
html>body #sidebar {
	width:175px;
	height:100%;
	overflow:auto;
	float:left;
}
html>body #content {
	height:100%;
	position:relative;
	overflow:auto;
}
#footer {
	width:100%;
	height:30px;
	background:#000000;
}
html>body #footer {
	position:fixed;
	bottom:0px;
	float:left;
	clear:both;
}
	</style>
</head>
<body>
<div id="header"></div>
		<div id="sidebar">
        <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>
 
			<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>
			<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>
			<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>
			<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>
			<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>
 
            </div>    
    	<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>
			<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>
			<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>
			<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>
			<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>
 
			<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>
			<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>
			<p>This is the last line.</p>
            </div>
 
</body>
</html>

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

Goodcoin
Offline
newbie
Tbilisi, Georgia
Last seen: 13 years 35 weeks ago
Tbilisi, Georgia
Joined: 2009-05-23
Posts: 8
Points: 0

Not quite there yet.

Thanks for your efforts, Larry. But we're not quite there yet. Like I wrote in the first post, I need to repeat my existing frame-based layout, which has fixed header/footer, but elastic contents and sidebar. The task is to duplicate the behavior and the composition of this layout EXACTLY, otherwise it's meaningless. You can see my present layout here:

http://www.rezo.ge/gallery.htm

Giving height:80% to the HTML element certainly moves the scrollable divs into the visible area, but effectively kills the whole idea of resizing the divs according to the window size. I need the footer to be forced to the bottom edge of the window, and the ONLY way to achieve this is position:fixed, which conflicts with height:80%, because footer moves relative to the lower edge of the window, while the divs change their vertical size according to the percentage value of the height.

You can see what I'm talking about, if you take a look at your code with the footer div back in action. Just resize the window and play around with it -- you'll see.

http://www.rezo.ge/cssframes2.htm

This is a challenge, Larry. Either we repeat that frame-based layout exactly as it is, or we have to admit that frames actually can do things which CSS simply can't. Now that would be a shame. Smile

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 12 years 12 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

My way will still allow you

My way will still allow you to fix your footer to the bottom of the screen. Your problem arises because the html element is that of the whole window, so 100% high is always extending out of the visible screen. By giving the html 80% and the body 100% of what is available, you are avhieving the same as just giving the body 100%, but the html locks in the content so you need the scrollbars.

Make no mistake, what I have given you is the solution to your problem.

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

Goodcoin
Offline
newbie
Tbilisi, Georgia
Last seen: 13 years 35 weeks ago
Tbilisi, Georgia
Joined: 2009-05-23
Posts: 8
Points: 0

Still don't see how

Sorry, Liam, I have confused your name in my previous post. Smile

I see your point perfectly, but we have the test page with your solution, which is not working. Yes, the footer is fixed to the bottom and it behaves as needed. But I can't say the same about the scrollable divs -- on larger sizes they simply don't reach the footer, resulting in the white gap, while on smaller sizes they become overlapped by the footer. This is because they change their height according to the percentage value, which depends on the size of the window, while the footer is ALWAYS 30px high and is fixed to the bottom.

I just don't see how to achieve the desirable result with your solution. Basically, you suggest to adjust the height of the HTML element so that it fits my footer, which isn't really helping. Whatever value I put instead of 80%, the visual match is only valid for the given size of the window. As soon as the window is resized, the divs start to miss the footer, which seems to be inevitable with my present code.

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 12 years 12 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

There you go mate,

There you go mate, sorted:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>CSS Frames Test Page</title>
	<style type="text/css" media="screen, print">
html {
height:100%;
padding:auto;
margin:auto;
}
 
body {
	margin:0;
	padding:0;
	height:100%;
	overflow:hidden;
}
html>body #wrap {height:100%;}
#header {
	width:100%;
	height:108px;
	background:#999999;
}
html>body #header {
	position:relative;
}
#sidebar {
	background:#CCCCCC;
}
html>body #sidebar {
	width:175px;
	height:100%;
overflow:hidden;
	float:left;
}
 
html>body #sidebar .scroller {
height:79%;
overflow:scroll;
width:175px;
}
 
html>body #content {
	height:100%;
	position:relative;
	overflow:auto;
}
#footer {
	width:100%;
	height:30px;
	background:#000000;
}
html>body #footer {
	position:fixed;
	bottom:0px;
}
	</style>
</head>
<body>
<div id="header"></div>
		<div id="sidebar">
		<div class="scroller">
        <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.
 
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.
 
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.
 
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.
 
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.
 
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>
            </div>    
						</div>
    	<div id="content">
	<p>Lorem ipsum...</p>
            </div>
	<div id="footer"></div>
</body>
</html>

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

Goodcoin
Offline
newbie
Tbilisi, Georgia
Last seen: 13 years 35 weeks ago
Tbilisi, Georgia
Joined: 2009-05-23
Posts: 8
Points: 0

No difference

Liam, did you see your code in action? Here you go:

http://www.rezo.ge/cssframes2.htm

And here's what we had before that:

http://www.rezo.ge/cssframes.htm

I don't see any difference, other than that now the sidebar has a redundant horizontal scrollbar.

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 12 years 12 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

What do you mean, is it

What do you mean, is it still outside your vertical screen. This should fix it. The difference is that we can reduce the height of the scrolling sidebar without having a white space.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>CSS Frames Test Page</title>
	<style type="text/css" media="screen, print">
html {
height:100%;
padding:auto;
margin:auto;
}
 
body {
	margin:0;
	padding:0;
	height:100%;
	overflow:hidden;
}
html>body #wrap {height:100%;}
#header {
	width:100%;
	height:108px;
	background:#999999;
}
html>body #header {
	position:relative;
}
#sidebar {
	background:#CCCCCC;
}
html>body #sidebar {
	width:175px;
	height:100%;
overflow:hidden;
	float:left;
}
 
html>body #sidebar .scroller {
height:75%;
width:175px;
overflow:auto;
}
 
html>body #content {
	height:100%;
	position:relative;
	overflow:auto;
}
#footer {
	width:100%;
	height:30px;
	background:#000000;
}
html>body #footer {
	position:fixed;
	bottom:0px;
}
	</style>
</head>
<body>
<div id="header"></div>
		<div id="sidebar">
		<div class="scroller">
        <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.
 
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.
 
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.
 
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.
 
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.
 
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>
            </div>    
						</div>
    	<div id="content">
	<p>Lorem ipsum...</p>
            </div>
	<div id="footer"></div>
</body>
</html>

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

Goodcoin
Offline
newbie
Tbilisi, Georgia
Last seen: 13 years 35 weeks ago
Tbilisi, Georgia
Joined: 2009-05-23
Posts: 8
Points: 0

Sorry I forgot to mention...

What I mean, Liam, is that it doesn't matter if the gap is white or grey. It's still there. Also, when reducing the window size, the footer overlaps the scrollable divs, just like before.

In order to eliminate this gap (on larger sizes) and overlap (on smaller sizes), the sidebar and content divs should maintain an equal distance from the bottom edge of the window, which has to be 30px -- the exact height of the footer.

Liam, I'm sorry that I forgot to mention an important detail: my existing layout uses a custom Javascript/CSS scrollbar in the sidebar, which behaves inadequately in IE when resizing. Also, it has a small fixed 5px white gap in Google Chrome and Safari, which I was unable to eliminate. I am a Firefox user and totally forgot about this problem, and you probably don't use Firefox. My bad. Please take a look at my layout without this script, it should give you a better understanding of what is required:

http://www.rezo.ge/gallery2.htm

Although I'm beginning to think that my task is impossible with pure CSS -- maybe AJAX or something like that.

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 12 years 12 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

You cannot stop a fixed

You cannot stop a fixed footer from overlapping the content on a resized window, but I never worry about people resizing a window, because it is something that is very rarely done. I cannot see the problem with having a gap below the scrolling sidebar. I think you are being a bit pernickity, but of course that is up to you, it is your website. I have helped as much as I can I'm afraid, I shall have to send you back to your search for knowledge.

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

Goodcoin
Offline
newbie
Tbilisi, Georgia
Last seen: 13 years 35 weeks ago
Tbilisi, Georgia
Joined: 2009-05-23
Posts: 8
Points: 0

Thanks for your help, Liam.

Thanks for your help, Liam. I only have some basic HTML knowledge and no CSS expertise, so I can use every bit of assistance, and you did your best. I really appreciate it.

Despite the difficulties, I am still determined to move away from the frames and generally use more CSS instead of tables and other outdated stuff. My present layout heavily relies on frame usability, so maybe it's time for me to come up with a different layout, based on CSS from the scratch.

Thanks again! And here's little fun for all your efforts. You probably have already seen it, but still. Smile

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 12 years 12 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

Hi Goodcoin, This should

Hi Goodcoin,

This should solve your problem. Jquery

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 12 years 12 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

Hi Goodcoin, This should

Hi Goodcoin,

This should solve your problem. Jquery http://flowplayer.org/tools/scrollable.html

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

Goodcoin
Offline
newbie
Tbilisi, Georgia
Last seen: 13 years 35 weeks ago
Tbilisi, Georgia
Joined: 2009-05-23
Posts: 8
Points: 0

Thanks, mate!

Thanks for the link, Liam. This one looks just what the doctor ordered:

http://flowplayer.org/tools/demos/scrollable/vertical.html

Although not sure if it's auto resizable. I'll have to check it out.

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 12 years 12 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

Yes,= You can set the

Yes,=

You can set the height of the outer container, and then also resize where you have the buttons to make it scroll. This is particularly good for you, because even if your sidebar extends out of the page, you just need to have your buttons correctly positioned and your still perfect.

Let me know if you have any problems implementing it, I also know my PHP and JQUERY and I'll help where I can.

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.