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> </p> </div> <div id="aside"> <h3> Aside heading </h3> <p> </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

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.
width 100%
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
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
gary.turner wrote: An element
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
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;