• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1100
  • Last Modified:

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:
with overflow property
This is a screen shot of the interface without the overflow property:
 without 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;
}
0
opike
Asked:
opike
  • 3
  • 2
1 Solution
 
opikeAuthor Commented:
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

0
 
opikeAuthor Commented:
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.
0
 
jeremyjared74Commented:
Can you provide the CSS?
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Reason for this behavior is because you have 3 floating DIV tags  inside the #content DIV. There are 2 ways for you to get rid off the overflow:auto with out getting the #footer DIV dragged all the way up.

1. Float the #content DIV also and make it 100% in width so it takes up the whole screen.
#content {
      background: #fff;
      clear: both;
      color: #333;
      padding: 10px 20px 40px 20px;
      float: left;
      width: 100%;
}

Open in new window


2. Add a clearing DIV to (end of) the #content DIV tag. (and remove the overflow: auto from css)
<div id="content">
	<div class="users form">...</div>
	<div class="actions">...</div>
	<div class="actions">...</div>
	<div style="clear: both;"></div>
</div>

Open in new window

0
 
opikeAuthor Commented:
I went with your first option; worked like a charm. Thanks!
0
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Glad to help. Thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now