Solved

Question about horizontal scroll bars and div tags

Posted on 2011-02-21
6
1,069 Views
Last Modified: 2012-05-11
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
Comment
Question by:opike
  • 3
  • 2
6 Comments
 

Author Comment

by:opike
ID: 34944035
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
 

Author Comment

by:opike
ID: 34944055
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
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 34948811
Can you provide the CSS?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 18

Accepted Solution

by:
Sudaraka Wijesinghe earned 500 total points
ID: 34948863
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
 

Author Closing Comment

by:opike
ID: 34957642
I went with your first option; worked like a charm. Thanks!
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34958322
Glad to help. Thanks for the points.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
C# GridRow get Old/New Value 1 55
FIx alignment of two texts 1 26
.php tree directory? 5 54
Configuring a checkbox in CSS and php 18 22
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

943 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

4 Experts available now in Live!

Get 1:1 Help Now