Jump to content
silverdigit

Unwanted horizontal scroll

Recommended Posts

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

post-181721-0-79470200-1427049109_thumb.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...