Layout issue

[gracexl]

I am running into a screen layout problem. Here is the sympton, it has two scroll bars on the right side of the screen which customers don't always notice on their computers. That prevents them from viewing the rest of the website. It also presents problem on smartphones which is getting more and more popular. Basically customers can only view the first couple of paragraphs on our website.

Here is the website I am talking about. http://www.camptents.com/

What I want to accomplish is to have the main body display properly which means people can scroll up and down freely along with the chat session floating on the screen of computers and smartphones. Any wisdom?

Here is the current code. The main body has a wrapper around it. I believe that is the one created two scroll bars. Underneath that, the chat session has the following code:

<!-- Powered by: Crafty Syntax Live Help http://www.craftysyntax.com/ -->
<div class="box">
<div id="craftysyntax">
<script type="text/javascript" src="/livehelp/livehelp_js.php?eo=1&relative=Y&amp;department=2&amp;serversession=1&amp;pingtimes=15"></script>
<br><font style="font-family: verdana, helvetica, sans-serif; font-size: 8px; color: #000000;">Powered By:</font>
<a href="http://www.craftysyntax.com" alt="Crafty Syntax Live Help" target="_blank" style="font-family: verdana, helvetica, sans-serif; font-size: 10px; color: #11498e; text-decoration: none; font-weight: bold;">Crafty Syntax</a>
</div>
</div>
<!-- copyright 2003 - 2008 by Eric Gerdes -->

[BLiZZaRD]

in your CSS find this:

html, body {
	height: 100%;
	overflow: auto;
}

and make it look like this:

html, body {
	height: 100%;
}

If you are worried about browser compatibility, especially with mobile phones, Then you need to look into a liquid layout design. A few examples can be found here.

[gracexl]

Thanks for the suggestion. I tried it, but it doesn't seem to do anything. I don't want two scroll bars since it confuses people, and I want to have the one portion of the website(the Crafty Syntax) to float on the website. How can I accomplish this?

Any suggestions would be very much appreciated.

[BLiZZaRD]

Your double scroll bar issue is because of the double declaration in your CSS:

html, body {
	height: 100%;
	overflow: auto;
}
.wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: auto;
}

Your wrapper contains everything on the page. It is set to overflow auto, you have a TON of content on the page, so, the overflow is set, and the scroll bar appears. You also declare the body to overflow, which, it does by default. Remove both. You don't need either one for your page.

As for the floating live help thing, you will need JavaScript help, which I am not good at, but there is a script for it found here