asked on

Question about horizontal scroll bars and div tags

I have a web page (built using cakephp) using a div with an "overflow: auto;" property. This causes the horizontal scroll bar to be enbedded with the div. I don't like this since a user has to scroll down first, and then scroll over. So I want to get rid of the div horizontal scroll bar and use the main browser window horizontal scroll bar. I'm able to do this by removing the "overflow: auto;" property in the css file, but then this causes other formatting changes that I don't want.

This is a screen shot of the interface with the overflow property:

This is a screen shot of the interface without the overflow property:

Here is the relevant section of code from the css file:
#content {
      background: #fff;
      clear: both;
      color: #333;
      padding: 10px 20px 40px 20px;
      overflow: auto;
}

opike

ASKER

This is the php/html code with the <div id="content"> tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php echo $this->Html->charset(); ?>
<title><?php __('CakePHP: the rapid development php framework:'); ?> <?php echo $title_for_layout; ?>
</title>
<?php
echo $this->Html->meta('icon');

echo $this->Javascript->link('jquery 1.4.4.js');

echo $this->Html->css('cake.generic');

if(isset($jsIncludes))
{     
	foreach($jsIncludes as $js)
	{         
		debug($js,true);
		echo $javascript->codeBlock($js,array("inline" => false));     
	}
} 

echo $scripts_for_layout;
?>
<script type="text/javascript">
		$(function(){
			$('.deleteButton').click(function(){
				$('#actionValue').val('1');
				var answer = confirm('Are you sure you want to delete');
				if(answer) $('.recordForm').submit();
			});
			$('.editButton').click(function(){
				alert('here 2');
				$('#actionValue').val('2');
				$('.recordForm').submit();
				//var answer = confirm('Are you sure you want to edit');
				//if(answer) $('.recordForm').submit();
			});
			$('.filterButton').click(function(){
				alert('here 3');
				//$('#actionValue').val('3');
				$tmp = document.getElementById('actionValue');
				if ($tmp==0)
					$('#actionValue').val('0');
				else
					$('#actionValue').val('1');
				alert($tmp.value);
				$('.filterForm').submit();
				//var answer = confirm('Are you sure you want to edit');
				//if(answer) $('.recordForm').submit();
			});
		});
	</script>
</head>
<body>
<div id="container">
<div id="header">
<h1><?php echo $this->Html->link(__('CakePHP: the rapid development php framework', true), 'http://cakephp.org'); ?>
<p align="right"><?php
//Display the logout link
if ($this->Session->check('Auth.User')):
echo $this->Html->link(
                        'Log Out',
array(
                                'controller' => 'users',
                                'action' => 'logout'
                                )
                                );
                                else:
                                echo $this->Html->link(
                        'Log In',
                                array(
                                'controller' => 'users',
                                'action' => 'login'
                                )
                                );
                                endif;
                                //end display logout link
                                ?></p>
</h1>
</div>
<div id="content"><?php
//display login/logout message
echo $this->Session->flash('auth'); ?> <?php echo $this->Session->flash(); ?>

<?php echo $content_for_layout; ?></div>


<div id="footer"><?php echo $this->Html->link(
$this->Html->image('cake.power.gif', array('alt'=> __('CakePHP: the rapid development php framework', true), 'border' => '0')),
					'http://www.cakephp.org/',
array('target' => '_blank', 'escape' => false)
);
?></div>
</div>
<?php echo $this->element('sql_dump'); ?>
</body>
</html>

Open in new window

opike

ASKER

There's a <div id="header"> section in front of the <div id="content"> section and it's as if the header formatting spills over into the content section when I remove the "overflow:auto;" property from the content formatting.

jeremyjared74

Can you provide the CSS?

ASKER CERTIFIED SOLUTION

Sudaraka Wijesinghe

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

opike

ASKER

I went with your first option; worked like a charm. Thanks!

Sudaraka Wijesinghe

Glad to help. Thanks for the points.