A horizontal scroll bar appeared on my website and the page is now wider than it was. The last thing I remember doing was adding a widget (to link a pic to another website) to the right sidebar of my page. I removed the widget but the horizontal bar still remained at the bottom of the page and the webpage is still too wide. Can you please help me in getting the page back to normal horizontal dimensions and without a horizontal scroll bar. thanks
here is the website
www.runningnurse.com
In your footer you have a div with inline CSS:
position:relative;left: 119px;
That's exactly how much the site is scrolling. An alternate style for that effect which would remove the scroll bar is this:
padding-left:119px; overflow:hidden;
The problem is in the footer, it's too wide because the div child element of the ul (ul elements are only supposed to have li as their child elements!) is positioned to the left.
You have this HTML at the bottom of the page:
<div id="footer">
<ul class="footer-links">
<div style="position:relative;left: 119px; "></div>
</ul>
Use this instead:
<div id="footer">
<ul class="footer-links" style="margin-left: 133px;">
<div>...</div>
</ul>
Also the fact that the HTML contains a lot of errors might give implications when viewing in in different browsers.
The problem has to do with your footer:
add #footer{width:947px} and it gets rid of the horizontal scrollbar for me.
As #j08691 Suggested, Use overflow:hidden and your problem would be solved.
One easy way would be to hide the overflow on the body tag.
body {
overflow-x: hidden;
}
Use overflow-x
Related
I have this page with a fixed nabber on top (using default bootstrap navbar).
The page holds a menu that includes links to different parts of the page using html anchors. The point is: the scrolling position is not perfect because I have this navbar occupying the first 50px of the page, so after clicking on the html link to anchor, the content is 50px hidden by the navbar.
What I want to do is: that the anchor link consider the first 50px to scroll it perfectly to the content.
Does anyone have an idea of how to fix it?
With Twitter Bootstrap there is a necessity to provide additional spacing when the navbar is fixed.
Underneath(or after, you might say) you'll want to provide the additional spacing required to unsheath the covered content out of mystery and into usefulness.
further reading: http://getbootstrap.com/components/#navbar-fixed-top (they actually recommend a padding-top of 70px to the body element)
You can either place a div that is 50px high over the content you want to scroll to, then anchor to that:
Link
<div id="link" style="height:50px;"></div>
<div class="content">
Content Here...
</div>
JSFiddle Demo
Or, give the content div a padding-top, or margin-top of the height of the nav bar:
Link
<div id="link" class="content">
Content Here...
</div>
CSS:
.content{
padding-top:50px;
}
JSFiddle Demo
I am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom.
This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content.
I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page.
I have tried to add a margin-bottom css property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a margin-top css property but not for the bottom.
This is the main structure to my website, without content:
<html>
<head>
</head>
<body>
<div class="CONTAINER">
<div class="PAGENAVBAR">
</div>
<div class='CATEGORYNAVBAR'>
</div>
<div class='PAGE_CONTENT'>
<div class="LEFTCONTAINER">
</div>
<div class="RIGHTCONTAINER">
</div>
</div>
<div class="PAGEFOOTER">
</div>
</div>
</body>
Can someone please suggest a method to achieve this effect?
I've found this to be effective:
body {
padding-bottom: 50px;
}
margin-bottom moves the whole element, try padding-bottom instead.
adding padding-bottom to the last element should do this, or you could add padding-bottom to the container element, just remember that this will be added to the height if you have it set in your css
use paragraph to do this. html paragraph
Try using 'padding-bottom' instead. The behaviour of this is more consistent across different browsers than 'margin-bottom'.
But be aware this will add to the overall height of the element in question, if you're using this in any calculations.
I'd give PAGE_CONTENT a margin-bottom; you may need to also give it overflow:hidden if your LEFTCONTAINER and RIGHT_CONTAINER are floated.
In css give margin-bottom attribute to the container class.
.container{
margin-bottom:100px;
}
I am working on this page here for a client of mine http://sw6.us/scott/index.html
Notice the site is all based within a div, the problem is the scroll bar that is produced because the text is to long. I have edited my CSS and changed "overflow" to hidden instead of auto but this just makes the text run off the screen and you can not scroll at all.
Here is my refined HTML code
<div class="main">
<div class="blk">
....
</div>
<div class="navbar">
....
</div>
<div class="programs">
.....
</div>
<div class="blk2">
...
</div>
</div>
</body>
</html>
The site is built out of the .main div
How can I make that scroll bar appear at the far right of the browser and scroll the .main div?
If this is not possible how can I achieve this exact look with a set up that will place the scrollbar on the right edge of the browser? The reason I am doing it like this is because the client want's the site looking exactly like his .pdf mock up.
Thanks!
If you want to scroll the main div change the CSS as follows...
html, body { overflow: hidden; }
div.main { overflow: auto; }
You should also set some bottom margin to leave some space for the shadow at the bottom...
Maybe posting the PDF would help better understand for me...
try this:
<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll;></div>
And if you want to hide horizontal scroll: overflow-x:hidden ;
before I ask the question here are my two constraints:
should work in IE 7+
I can only change the CSS, I can not change the HTML/JS
So, I've got two div's:
<div id="content"></div>
<div id="footer"></div>
"#content" is the content.
"#footer" is a footer which only contains a background image and nothing that is really of value.
Now, how can I hide part of the footer when the page is so long that it scrolls, but display it completely when the page doesn't scroll?
(So far, I have tried stuff like:
#footer {height: 30px; margin-bottom: -20px;}
but that doesn't seem to work...)
here you have a solution only with HTML and CSS:
Source:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
Example:
http://www.cssstickyfooter.com/
Good Luck
I have this template I have been working with and I am really stuck on figuring out why the layout div is closed right away.
I looked at it with http://validator.w3.org and while there are many errors on the page, the main one is that there is some unbalance of closing and opening of divs. I am staring at it with firebug and nothing comes to mind as to why this is happening.
Any idea why the layout is so messed up here? http://www.problemio.com/problems/problem.php?problem_id=223 and why the footer is appearing on the right side of the page?
Thanks!
add </div> before <div class="footer"> , and add clear:both; to .footer{}
the footer is appearing on the right side of the page because it is in your right column div:
<div style="float: right; width: 240px;">
Your footer is inside the <div float=right> the contains the sidebar text. It cannot appear at the bottom of the page, only at the bottom of that div. If you want it to spread out at the very bottom of the, you'll have promote that footer div to be a direct child of the #layout div.