• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1096
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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