silverdigit Posted March 22, 2015 Share Posted March 22, 2015 As you can see by the screenshot I have an unwanted horizontal scroll bar. The styles are below: #container { width: 100%; background: #fff; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } #header { background: #fff; padding: 20px; height: 1%; } .header_right { background-color: #fff; float: right; height: 2%; 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; } #topspace { clear: both; background:#fff; text-align: right; padding: 10px; height: .25%; } #bottomspace { clear: both; background:#fff; text-align: left; padding: 10px; height: 0.15%; } /*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 */ #content-container1 { float: left; width: 100%; background: #fff url(/wp-content/uploads/layout-three-liquid-background1.gif) repeat-y 20% 0; } #content-container2 { float: left; width: 100%; background: url(/wp-content/uploads/layout-three-liquid-background2.gif) repeat-y 80% 0; } #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: right; width: 56%; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0%; padding-top: 20px; padding-right: 25%; padding-bottom: 20px; padding-left: 0%; } #content h2 { margin: 0; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; color: #000066; } #aside { float: right; width: 16%; padding: 20px 0; margin: 0 2% 0 0; display: inline; } #aside h3 { margin: 0; } #footer { clear: both; background: #333; text-align: right; padding: 7px; height: 1%; color: #FFFFFF; } .video { background-color: #0066CC; text-align: center; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; font-style: normal; line-height: 1.25em; font-weight: normal; } Thank you in advance Link to comment Share on other sites More sharing options...
tejasamrute Posted March 23, 2015 Share Posted March 23, 2015 can u also add your html code??? Link to comment Share on other sites More sharing options...
Ingolme Posted March 23, 2015 Share Posted March 23, 2015 Press F12 in Firefox, Chrome or Internet Explorer to open developer tools. Open the HTML tab. Click on a small button that looks like a mouse cursor over a rectangle and the hover over the page looking for an element which has a bounding box outside the right edge of the page. Link to comment Share on other sites More sharing options...
silverdigit Posted April 13, 2015 Author Share Posted April 13, 2015 can u also add your html code??? <body> <div id="container"> <div class="header_right"></div> </div> <div id="navigation"> <ul> <li> </li> <li><a href="https://twitter.com/?lang=en-gb target="_blank">Social Media</a></li> <li><a href="https://youtube.com/user/meolebraceschool/" target="_blank">YouTube Channel</a></li> </ul> </div> <div id="topspace"></div> <div id="content-container1"> <div id="container_flyout"> <div id='flyout_menu'> <ul class="style1"> <li><a href='#'>Surfboards</a> <ul> <li><a href='#'>QuickSilver</a> <li><a href='#'>BillaBong</a> <ul> </ul> </li> </ul> </li> <li><a href='#'>Wetsuits</a> <ul> <li><a href='#'>BillaBong</a> <li><a href='#'>Rip Curl</a> <li><a href='#'>QuickSilver</a> <ul> </ul> </li> </ul> </li> <li><a href='#'>WindSurfing</a> <ul> <li><a href='#'>Book and Hire</a> <li><a href='#'>Buy</a> <ul> </ul> </li> </ul> </li> <li><a href='#'>Scuba Diving</a></li> <ul> <li><a href='#'>Book and Hire</a> <li><a href='#'>Buy</a> <ul> </ul> </li> </ul> </li> </ul> </div> </div> <div id="content"> <p class="text">Welcome to Wind & Waves!</p> <p class="text_v2">We are a WaterSports company on the UK coast. We sell and hire WaterSport products to our tourists, our local residents and people who do the sport as a hobbie or do it very regular. </span></p> <p class="main_image_surfing_flip_board_up"><img src="images/Surf Board.jpg" width="300" height="200" alt="surf_board"></p> <p class="main_image_scuba_diving"><img src="Scuba Diving.jpg" width="300" height="300" alt="scuba_diving"></p> </div> <div id="footer"></div> </div> </div> Link to comment Share on other sites More sharing options...
silverdigit Posted April 13, 2015 Author Share Posted April 13, 2015 Press F12 in Firefox, Chrome or Internet Explorer to open developer tools. Open the HTML tab. Click on a small button that looks like a mouse cursor over a rectangle and the hover over the page looking for an element which has a bounding box outside the right edge of the page. I have done that and can't see anything that would cause this to happen. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 14, 2015 Share Posted April 14, 2015 (edited) Its because you are using left:100%; it forces that element and content area beyond right side of browser window, and so scroll bar appears, if you use negative value instead because left remains fixed, no scroll bars will show. Your fly out menu is not structured properly either you have misplaced opening/closing tags, and missing closing quote on one of your links. Edited April 14, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
dsonesuk Posted April 14, 2015 Share Posted April 14, 2015 (edited) AFTER correcting what I think you are looking for, (add misplaced div to list, you really should validate before posting) css <style type="text/css"> #container { width: 100%; background: #fff; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } #header { background: #fff; padding: 20px; height: 1%; } .header_right { background-color: #fff; float: right; height: 2%; 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; } #topspace { clear: both; background:#fff; text-align: right; padding: 10px; height: .25%; } #bottomspace { clear: both; background:#fff; text-align: left; padding: 10px; height: 0.15%; } /*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 */ #content-container1 { float: left; width: 100%; background: #fff url(/wp-content/uploads/layout-three-liquid-background1.gif) repeat-y 20% 0; } #content-container2 { float: left; width: 100%; background: url(/wp-content/uploads/layout-three-liquid-background2.gif) repeat-y 80% 0; } #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: right; width: 56%; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0%; padding-top: 20px; padding-right: 25%; padding-bottom: 20px; padding-left: 0%; } #content h2 { margin: 0; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; color: #000066; } #aside { float: right; width: 16%; padding: 20px 0; margin: 0 2% 0 0; display: inline; } #aside h3 { margin: 0; } #footer { clear: both; background: #333; text-align: right; padding: 7px; height: 1%; color: #FFFFFF; } .video { background-color: #0066CC; text-align: center; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; font-style: normal; line-height: 1.25em; font-weight: normal; } </style> html <div id="container"> <div class="header_right"></div> </div> <div id="navigation"> <ul> <li> </li> <li><a href="https://twitter.com/?lang=en-gb" target="_blank">Social Media</a></li> <li><a href="https://youtube.com/...olebraceschool/" target="_blank">YouTube Channel</a></li> </ul> </div> <div id="topspace"></div> <div id="content-container1"> <div id="container_flyout"> <div id='flyout_menu'> <ul class="style1"> <li><a href='#'>Surfboards</a> <ul> <li><a href='#'>QuickSilver</a></li> <li><a href='#'>BillaBong</a></li> </ul> </li> <li><a href='#'>Wetsuits</a> <ul> <li><a href='#'>BillaBong</a></li> <li><a href='#'>Rip Curl</a></li> <li><a href='#'>QuickSilver</a></li> </ul> </li> <li><a href='#'>WindSurfing</a> <ul> <li><a href='#'>Book and Hire</a></li> <li><a href='#'>Buy</a></li> </ul> </li> <li><a href='#'>Scuba Diving</a> <ul> <li><a href='#'>Book and Hire</a></li> <li><a href='#'>Buy</a></li> </ul> </li> </ul> </div> </div> <div id="content"> <p class="text">Welcome to Wind & Waves!</p> <p class="text_v2"><span>We are a WaterSports company on the UK coast. We sell and hire WaterSport products to our tourists, our local residents and people who do the sport as a hobbie or do it very regular. </span></p> <p class="main_image_surfing_flip_board_up"><img src="images/Surf Board.jpg" width="300" height="200" alt="surf_board"></p> <p class="main_image_scuba_diving"><img src="Scuba Diving.jpg" width="300" height="300" alt="scuba_diving"></p> </div> <div id="footer"></div> </div> EDIT: after fixing your html your original css worked fine. also i should add closing </li>, it would be easier to read Edited April 14, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
silverdigit Posted April 16, 2015 Author Share Posted April 16, 2015 AFTER correcting what I think you are looking for, (add misplaced div to list, you really should validate before posting) Thanks for that, but despite all of your "corrections" it still has the unwanted horizontal scroll bar in IE and Chrome. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 16, 2015 Share Posted April 16, 2015 (edited) Strange it not working now in mine neither? anyway here corrected code with amendments that works in chrome and IE <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> #container { width: 100%; background: #fff; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } #header { background: #fff; padding: 20px; height: 1%; } .header_right { background-color: #fff; float: right; height: 2%; 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; } #topspace { clear: both; background:#fff; text-align: right; padding: 10px; height: .25%; } #bottomspace { clear: both; background:#fff; text-align: left; padding: 10px; height: 0.15%; } /*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; left: 100%;}/*amended by dsonesuk */ #flyout_menu ul ul { top: 0; left: -9999em; } /*amended by dsonesuk */ #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 */ #content-container1 { float: left; width: 100%; background: #fff url(/wp-content/uploads/layout-three-liquid-background1.gif) repeat-y 20% 0; } #content-container2 { float: left; width: 100%; background: url(/wp-content/uploads/layout-three-liquid-background2.gif) repeat-y 80% 0; } #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: right; width: 56%; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0%; padding-top: 20px; padding-right: 25%; padding-bottom: 20px; padding-left: 0%; } #content h2 { margin: 0; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; color: #000066; } #aside { float: right; width: 16%; padding: 20px 0; margin: 0 2% 0 0; display: inline; } #aside h3 { margin: 0; } #footer { clear: both; background: #333; text-align: right; padding: 7px; height: 1%; color: #FFFFFF; } .video { background-color: #0066CC; text-align: center; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; font-style: normal; line-height: 1.25em; font-weight: normal; } </style> </head> <body> <div id="container"> <div class="header_right"></div> </div> <div id="navigation"> <ul> <li> </li> <li><a href="https://twitter.com/?lang=en-gb" target="_blank">Social Media</a></li> <li><a href="https://youtube.com/...olebraceschool/" target="_blank">YouTube Channel</a></li> </ul> </div> <div id="topspace"></div> <div id="content-container1"> <div id="container_flyout"> <div id='flyout_menu'> <ul class="style1"> <li><a href='#'>Surfboards</a> <ul> <li><a href='#'>QuickSilver</a></li> <li><a href='#'>BillaBong</a></li> </ul> </li> <li><a href='#'>Wetsuits</a> <ul> <li><a href='#'>BillaBong</a></li> <li><a href='#'>Rip Curl</a></li> <li><a href='#'>QuickSilver</a></li> </ul> </li> <li><a href='#'>WindSurfing</a> <ul> <li><a href='#'>Book and Hire</a></li> <li><a href='#'>Buy</a></li> </ul> </li> <li><a href='#'>Scuba Diving</a> <ul> <li><a href='#'>Book and Hire</a></li> <li><a href='#'>Buy</a></li> </ul> </li> </ul> </div> </div> <div id="content"> <p class="text">Welcome to Wind & Waves!</p> <p class="text_v2"><span>We are a WaterSports company on the UK coast. We sell and hire WaterSport products to our tourists, our local residents and people who do the sport as a hobbie or do it very regular. </span></p> <p class="main_image_surfing_flip_board_up"><img src="images/Surf Board.jpg" width="300" height="200" alt="surf_board"></p> <p class="main_image_scuba_diving"><img src="Scuba Diving.jpg" width="300" height="300" alt="scuba_diving"></p> </div> <div id="footer"></div> </div> </body></html> Edited April 16, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now