My container div adds a scroll bar below my div #wrapper.
This is my css for the wrapper
#wrapper {
background:#383434;
width:1000px;
height:auto !important;
min-height:100%;
overflow:hidden;
height: 100%;
-moz-box-shadow: 0 2px 15px 5px #000;
-webkit-box-shadow: 0 2px 15px 5px#000;
box-shadow: 0px 2px 15px 5px #01DF01;
margin-top:20px;
border-radius:5px;
margin-bottom:50px;
}
How can I remove or hide the scrollbar?
Deleting/modifying overflow:auto; solves the problem. I think hidden is what you are looking for.
If you look at the documentation you can find what does the different values actually do:
visible
Default value. Content is not clipped, it may be rendered outside the content box.
hidden
The content is clipped and no scrollbars are provided.
scroll
The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.
auto
Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows.
overflow: auto means to show a scrollbar if the content overflows, which is happening in your case. Perhaps what you want is an overflow: hidden, which will not show any scroll bars. In your site, this seems to work.
The other option is to hunt down what it is that has a size overflowing your container and shrink it.
You can add overflow-x: hidden to the style for #wrapper.
Edit:
I'm finding that the margins for your #middle styling is causing that horizontal scrollbar to appear. Putting margin-top: -55px and clearing the margin property on it fixes the problem.
Related
I am trying to create a sticky footer from a simple looking tutorial I found online. This seems to work ok until I try putting a width on my content div and I have no idea why.
If I add a width to the content div it seems the footer no longer has any distance between itself and the content div and so it obscures the content if there is a lot of content.
I have created this jsfiddle but it doesnt look as obvious there as it does if viewed in say firefix or IE.
Does anybody know why this is happening and what can I do to have a content div with a fixed width and auto margins to centre it but still have a footer that sticks to the bottom all the time if there is hardly any content or a large amount of content.
Below is my css for the content div:
#content {
margin-top: 15px;
padding-bottom:100px; /* Height of the footer element */
border-left: 1px solid #C9C9C9;
border-right: 1px solid #C9C9C9;
border-bottom: 2px solid #C9C9C9;
box-shadow: -3px 0 3px -3px #333, 3px 0 3px -3px #333;
width: 1024px; /* Here adding a width causes the footer to overlap */
margin-left:auto;
margin-right:auto;
background-color: white;
text-align: center;
border: 1px solid red;
}
http://jsfiddle.net/32M9Q/1/
At least in Chrome, the JSFiddle shows no problems for me. It looks the same with or without putting a width on content. I even added a bunch more words and the footer still didn't cut anything off. So the padding does effectively work, at least in my case.
However, based on what you said on the other answer, perhaps you could just change position:absolute on the footer to position:relative (assuming the footer won't have anything placed under it...and I'm guessing not since it's a footer). It makes sure the footer is placed after the content instead of being placed on it. Be wary, though, and make sure to check it in many different cases (browsers and devices).
I would also include a margin-bottom on the content, just in case.
Try adding the following CSS rules to the #footer element:
position: fixed;
clear: both;
This will give you a sticky footer (if I got what you want to do correctly) that does not overlap with the main content. You can probably loose the clear: both part, but it may help with some browsers...
Setting the background color of my web page to match the footer and the body isnt an option, I appreciate all the answers I have been given so far but unfortunately none of them were suitable for me.
I have had to do what I consider to be a hack which is add a div below the content which is higher than the footer, this means the footer sits on top of this div and not my content giving the illusion of space between the content and the footer:
<div style="height: 120px;"></div>
<div id="footer"><span style="color: red"> This is the footer section</span></div>
When I set #wrap {height: 0; overflow: hidden}, the inner anchor tag should be hidden, thus click on the shadow area should have nothing happened.
I tested it on Firefox and IE. Both of them works fine.
But on Chrome, when I click on the shadow area, I still get alert window.
Is it a WebKit bug?
Here is the demo:
http://jsbin.com/ofuxar/3
<div id="wrap">
click
</div>
#wrap {
height: 0;
overflow: hidden;
position: absolute;
box-shadow: 0 10px 10px 10px black;
}
#wrap a {
display: block;
height: 100px;
}
You're setting the height to 0 but it's attributes are still displayed. Ergo, any styles you have applied to that element are still going to be shown. IF you did a 1px border, it would show a 1px with that border color. Probably the most known instance of the occurrence is when you have float elements inside of a parent div and the parent div collapses. All margin and border elements are retained, but the div has a height of 0.
As #Andrew stated in the comment, you should use display:none; to hide elements. If I may ask, what is your reasoning for setting something to height: 0?
EDIT http://jsfiddle.net/bHPFN/ As stated before, the attributes to the element cause it to NOT have a height of 0px, but instead extend the functional dimension of the element to what ever the CSS attributes delegate.
As I'm developing my webpage, I found an issue using the box-shadow feature.
I want to add a box-shadow to the whole wrapper of my webpage, which contains the header, nav, content and footer.
The nav and content are side by side element.
The problem is, that when I add the box-shadow to the #wrapper, it only appears on the header, as I reproduced here
I was able to fix it by using the side by side elements with the display: table-cell propriety, but it ruined the rest of the page, so I'm asking how could I fix this.
Add overflow:hidden to your wrapper as shown here. It will force your container to wrap the floated elements.
[edit] Without having to add extra markup...
Use CSS clear:both; because you are floating elements to the left, check this out : my fiddle
instead of a wrapper you could simply make another separate with the same size and position and give it a box shadow. change the height to whatever you want, just figure out the height of the content you want to be shadowed.
<style>
div.shadow {
width: 400px;
height: 100%;
position:absolute;
z-index:-99;
box-shadow: 3px 3px 20px #999;
-moz-box-shadow: 3px 3px 20px #999;
-webkit-box-shadow: 3px 3px 20px #999;
}
</style>
<body>
<div class="shadow></div>
<!-- everything else here-->
Everything is wrapped in a div with an id="main_wrap"
the main wrap has this style:
#main_wrap{
margin:0 auto;
width:960px;
position:relative;
}
Since everything is wrapped inside of this div, I don't understand why a horizontal scroll bar would appear at the bottom.
If any of the children have borders, padding (or sometimes margins) applied to them, that adds to the width and height. Using overflow: hidden; would avoid the scroll bars. But, if something has too much width, you probably want to find where it is coming from to avoid possible problems in the future.
Note that you may be able to use box-sizing: border-box to prevent borders and padding from adding additional width (or height). This is particularly useful when you are using something like width: 100%, but width: 100% also isn't necessary in most cases - elements with display: block applied will fill the width by default AND keep padding and borders from adding additional width.
For example:
html, body { margin: 0; padding: 0; }
div {
background: #111;
color: #eee;
padding: 1em; /* This doesn't add to width - still at 100% width */
border: 2px solid #5e5; /* This also doesn't add to width - still at 100% width */
}
<div>Test</div>
Try add overflow hidden:
#main_wrap{
margin:0 auto;
width:960px;
position:relative;
overflow: hidden;
}
That should work (but is hacky).
If the elements are side by side and have a combined width or , as BDawg says margins or paddings, that cause it to exceed 960px a scroll bar could appear. Post your entire code and we can figure it out very quickly. Hiding the overflow should work but it would not really explain why the scroll bar is appearing. Giving us your entire markup will help find the root of the problem.
Somewhere you've left any DOM elements unseen which occupies the extra width. it's better to find and fix the children than to use overflow:hidden . overflow:hidden will hide the scroll bar if user zooms in the page.
Working 100%
if you are using bootstrap it takes
margin-left & right 15px (or) -15px
you need to change 15px to 0px
Example
.main_wrap .row{
margin-left:0px;
margin-right:0px;
}
If you change width to 100% it helped you, but if you don't want, just try add external <div style="width:100%"></div> like this:
<div style="width:100%">
<div class="main_wrap">
%your content%
</div>
</div>
I am using the AJAX autocomplete add-on to the <asp:textbox> control. I have everything working with a <div> around the <ajaxToolkit:AutoCompleteExtender>.
I set the following CSS class:
.autocomplete_CompletionListElement
{
margin: 0px;
background-color: White;
cursor: default;
overflow-y: auto;
overflow-x: hidden;
height:180px;
text-align: left;
border: 1px solid #777;
z-index:10000;
}
Right now, when the list contains a reasonable amount of items, a vertical scrollbar appears (which is correct) and I can scroll through the drop down which is set to a height of 180px in the CSS (as seen above).
However, when there are only 1 or 2 items in the drop down, the height remains fixed at 180px with the 2 items and blank white space below. What I would ideally want is that the AJAX drop down would shrink to fit the height of its contents. If the contents are more than 180px, then the scrollbar should appear (as it is doing now).
Remove height:180px and change the CSS to use something like:
max-height:180px;
That should work (but I think only from IE7+) the other browsers should support it ok.