I am facing this issue when i scroll the window to horizontal then the footer and header breaks.
Please help with CSS
You can check the live demo here http://yeszindagi.com/
body {
font-family: Arial, Helvetica, sans-serif;
font-size:1.3em;
min-height:100%;
}
.containerMain {
min-height:100%;
width: 100%;
}
.full {
width:100%;
}
.fixed {
width:900px;
}
.footer {
border-top:1px dashed #000;
margin-top:5px;
height:50px;
background-color:#F7B200;
bottom:0px;
position:relative;
}
---------------------------- HTML CODE ----------------------------------------
<div class="containerMain">
....
.....
.........
<div class="full footer clear ">
<div class="fixed center">
<div class="left">
<ul class="links">
<li><a href="#">Contact</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="social right">
<a href="#" target="_blank" title="Facebook"><span class="facebook-mini"></span></a>
<a href="#" target="_blank"><span class="twitter-mini" title="Twitter"></span></a>
<a href="#" target="_blank"><span class="pinterest-mini" title="Youtube"></span></a>
<a href="#" target="_blank"><span class="linkedin-mini" title="Linkedin"></span></a>
</div>
</div>
</div>
</div>
((JavascriptExecutor) driver). executeScript("arguments[0]. scrollIntoView(true);", element); This works for vertical scrolling but not for horizontal.
Web browsers do not take into account the width of the scrollbar on the side of a page when computing width values, so since we have a page that is longer than a single viewport, part of our page is being rendered behind the vertical scroll bar, causing the browser to display a horizontal scroll bar.
You can also set the overflow-x CSS property to hidden, which prevents child content from wrapping within its container but turns off sideways scrolling. Another solution is to set the width of child elements to 100%.
The best way to solve this issue is via CSS.
Apply a min-width
to its parent container and make sure its children have a width: 100%
. See below:
.containerMain {
width: 100%;
min-width: 900px;
}
.footer {
width: 100%;
}
I suggest you one solution with jquery:
$(window).bind('resize', resizeHandler);
function resizeHandler(){
var newWidth = $(document).width();
$('.footerWrapper').css('width', newWidth);
}
Put to function divs that you want to fit the document width and add to body onload="resizeHandler()" attribute.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With