5 replies [Last post]
twiz
twiz's picture
Offline
newbie
UK
Last seen: 4 years 31 weeks ago
UK
Timezone: GMT+1
Joined: 2015-04-16
Posts: 3
Points: 6

Hi,

I have an unwanted horizontal scroll bar. I have included the html and css below. This is a work in progress so not perfect.

I have tried changing the widths on several elements without any change. It does the same in IE and Chrome.

<div id="container">
	<div id="header">
	<div class="header_right"></div>
 
		<h1>Put your site name here</h1>
  </div>
	<div id="navigation">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Contact us</a></li>
		</ul>
	</div>
	<div id="content-container1">
		<div id="content-container2">
			<div id='flyout_menu'>
<ul>
   <li><a href='#'><span>Link 1</span></a></li>
   <li><a href='#'><span>Link 2</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>Link 3</span></a></li>
   <li><a href='#'><span>Link 4</span></a></li>
</ul>
</div>
			<div id="content">
				<h2>
					Page heading
				</h2>
				<p>&nbsp;</p>
		  </div>
			<div id="aside">
				<h3>
					Aside heading
				</h3>
				<p>&nbsp;</p>
			</div>
			<div id="footer">
				Copyright © Site name, 20XX
			</div>
		</div>
	</div>
</div>
 
 
 
 
#container
{
	margin: 0 auto;
	width: 100%;
	background: #fff;
}
 
#header
{
	background: #ccc;
	padding: 20px;
	height: 80px;
}
 
.header_right {
	background-color: #00CCCC;
	float: right;
	height: 100px;
	display: inline;
	margin-bottom: 0px;
}
 
#header h1 { margin: 0; }
 
#navigation
{
	float: left;
	width: 100%; 
	background: #333;
}
 
#navigation ul
{
	margin: 0;
	padding: 0;
}
 
#navigation ul li
{
	list-style-type: none;
	display: inline;
}
 
#navigation li a
{
	display: block;
	float: left;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
}
 
#navigation li a:hover { background: #383; }
 
#content-container1
{
	float: left;
	width: 100%;
	background: #fff;
}
 
#content-container2
{
	float: left;
	width: 100%;
}
 
#section-navigation
{
	float: left;
	width: 16%;
	padding: 20px 0;
	margin: 0 2%;
	display: inline;
}
 
#section-navigation ul
{
	margin: 0;
	padding: 0;
}
 
#section-navigation ul li
{
	margin: 0 0 1em;
	padding: 0;
	list-style-type: none;
}
 
#content
{
	float: left;
	width: 56%;
	padding: 20px 0;
	margin: 0 0 0 2%;
}
 
#content h2 { margin: 0; }
 
#aside
{
	float: right;
	width: 16%;
	padding: 20px 0;
	margin: 0 2% 0 0;
	display: inline;
}
 
#aside h3 { margin: 0; }
 
#footer
{
	clear: both;
	background: #ccc;
	text-align: right;
	padding: 20px;
	height: 1%;
}
 
/*Flyout CSS menu */
 
#flyout_menu {
	font-weight: 600;
	width: 200px;
	float: left;
}
 
#flyout_menu ul, li {
  list-style: none;
  margin: 0;
  padding: 0; 
}
 
#flyout_menu ul li.hover,
#flyout_menu ul li:hover { position: relative; z-index: 599; }
 
#flyout_menu ul ul{
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 598;
}
 
#flyout_menu ul li:hover > ul { visibility: visible; }
 
#flyout_menu ul ul { top: 0; left: 100%; }
 
#flyout_menu span, #flyout_menu a {
	display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none; }
 
#flyout_menu li {
	background-color: #333333;
}
#flyout_menu li:hover, #flyout_menu li.active {
	background-color: #666666;
}
 
#flyout_menu a {
    color: #FFF;
    line-height: 160%;
    padding: 16px 8px 16px 28px;
    width: 164px; }
 
#flyout_menu ul ul li {
	background: #006C6C;
	border-bottom: 1px solid #007171; }
 
#flyout_menu ul ul li:hover {
	background-color: #999999;
}
 
/* end of flyout menu */

Thanks in advance Smile

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 16 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi twiz, Do you need to set

Hi twiz,
Do you need to set #container width to 100% ?
By default it will fill all available horizontal space as it is a block level element.

twiz
twiz's picture
Offline
newbie
UK
Last seen: 4 years 31 weeks ago
UK
Timezone: GMT+1
Joined: 2015-04-16
Posts: 3
Points: 6

width 100%

Tony wrote:

Do you need to set #container width to 100% ?
By default it will fill all available horizontal space as it is a block level element.

I have tried commenting it out altogether, using auto and inherit but nothing removes the scroll??

thanks

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 1 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

visibility is doing you in

An element with {visibility: hidden;} still occupies its normal place in the flow. I'm guessing, as I haven't given it any thought, that {position: absolute;} is negated by being hidden. That means those block element are not shrink-wrapped and take up their natural width.

The following edits fix the problem. They may cause other problems (I haven't tested).

    #flyout_menu ul ul{
       /* visibility: hidden;*/
display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 598;
    }
 
    #flyout_menu ul li:hover > ul { display: block; /*visibility: visible;*/ }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

twiz
twiz's picture
Offline
newbie
UK
Last seen: 4 years 31 weeks ago
UK
Timezone: GMT+1
Joined: 2015-04-16
Posts: 3
Points: 6

gary.turner wrote: An element

gary.turner wrote:

An element with {visibility: hidden;} still occupies its normal place in the flow. I'm guessing, as I haven't given it any thought, that {position: absolute;} is negated by being hidden. That means those block element are not shrink-wrapped and take up their natural width.

The following edits fix the problem. They may cause other problems (I haven't tested).

    #flyout_menu ul ul{
       /* visibility: hidden;*/
display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 598;
    }
 
    #flyout_menu ul li:hover > ul { display: block; /*visibility: visible;*/ }

cheers,

gary

Worked like a charm Gary, thanks Smile

VeeraM
VeeraM's picture
Offline
Enthusiast
bangalore
Last seen: 4 years 4 weeks ago
bangalore
Timezone: GMT+5.5
Joined: 2014-09-22
Posts: 59
Points: 59

horizontal scroll

Hi the unwanted scroll in horizontal used in js used css display:none or
ex;
position: absolute;
top: 0;
left: 0;
z-index: 1000;