My page is overflowing to the right (there is extra empty space causing a horizontal scrollbar). CSS file is link to css.
The practice I have followed is - in the beginning, setting padding & margin 0 for all used html elements. Then, the top level boxes have width+padding+margin <= 100% to the best of my observation. More importantly, I have debugged in Chrome Developer Tools and Firebug (in Firefox). I went through each container box in the hierarchy in body tag, and each one's width is same as window width. Why then the overflow?
On a related note, if div A contains divs B & C, then A's width will be at least max(width(B), width(C)), right?
It looks like the problem is on #mainhmenu with 100% width and 5% padding on boths sides from
#media (min-width: 1200px)
#navigation ul {
padding: 0% 5%;
}
contributing to an overall width of 110%.
I just released a cross browser tool that you can use to solve problems like this. Just mouseover each element in the area to see margins, borders and padding until you find the culprit!
HTML Box Visualizer - GitHub
Remove width: 100%; from #mainhmenu :)
Its your #mainmenu
Its width is set at 100% and has a 5% padding on the sides.
If you get rid of the padding or set its width to 90% you will solve your problem
You can hide the horizontal scrollbar by,
body{
overflow-x:hidden;
}
hope this helps.And please do understand that once you specify a width and if you add padding to it, it will add to the overall width of the element.
Related
I'm building a responsive webpage and have set all outer wrappers (inlcuding body) to 100% width. The problem is that some elements 100% width is going outside the wrappers?
Please, take a look on this page : http://test.ufeed.se/
Size your browser to under 1000 px width. scroll down a bit and then use the horizontal scroll. You will see that some of the elements are outside the wrapper, why?
Do I maybe have to remove px from 100% width like this :
width: calc(100% - 16px);
to remove paddings (that takes extra space)?
padding makes elements bigger if you are not using box-sizing: border-box
Its because of the box model. Basically the width is set to 100% and then the margin, borders and padding add on to that pushing content outside of where you want it.
Yes you can remove the padding and that should resolve the problem, but as block level elements automatically take up the full width available you should just be able to remove the width and it will work as intended.
You can also use box-sizing: border-box; which tells the browser to include padding within the width calculation.
Without actually looking at your code I think these are the best solutions to your problem. If you want more specific help replicate the problem in a jsFiddle.
Learn about width: auto and the difference between width:auto and width:100%
If a container already has a width and you're thinking about setting a width of 100% on a descendant then NOPE what you really need is auto ;) Whatever the padding, border and box model, the result will be the same and what you intended.
* { box-sizing: border-box } and its prefixes (and boxsizing.htc polyfill for IE6-7 if needed) is also neat but it has huge consequences on your layout. I mean, it's a choice you've to make for your whole project. width: auto is useful in more particular situations.
i think this width element should be a %px element
.postContainer .createdDateCon {
width: 150px;
}
I have a big absolute div that holds a smaller relative div. The smaller div wraps an Image (png) and auto sizes with height:auto. All works fine. But on one particular site, I get 5px of extra spacing at the bottom of the smaller div after the resize, like it over calculated the height needed? I assume I'm somehow inheriting something from the site that is impacting my resize and div container.
I reworked everything, clear floats, overflow, alternate positioning, removed auto option, flow, etc, but I can't seem to get rid of that 5px extra at the bottom, and its only on that site?
My question - how do you debug your height or auto height issues, and any idea what could be causing this?
Thanx,
Chris
on the container div:
line-height: 0px; will eliminate any height increase caused by white space.
padding: 0px; will eliminate an padding along the inside of the container div.
on the image
margin: 0px will eliminate any space added around the outside of the image.
Could you point us to the site or a jsfiddle so we can get a better idea of what's going on?
As #RyanMcDonough mentioned, Chrome's Inspector is awesome. In IE, you have the IE developer toolbar. In FF you can use Firebug (which is a classic!).
Try
font-size:0;
line-height:0
for smaller div
Example http://jsfiddle.net/U9z5K/14/
Or use
display:block;
for an image
I'd use something like Chrome's Inspect Element, and have a look at the css rules that are affecting it.
You can then go through all the elements and enable/disable on the fly to see what is affecting it.
https://developers.google.com/chrome-developer-tools/
These three SO questions didn't quite get me what I needed, interesting though the BFC layout stuff was. (One, Two, Three)
This fiddle shows the issue I'm having, only in Chrome is the hidden content still enforcing width dimensions of the div classed 'content' with a width value of 0px.
This layout is the basis for an Accordion style menu... which obviously isn't going to work if the enforced content dimensions are visible :P
Why is Chrome behaving this way, maybe I missed something in the BFC explanation? A solution would be awesome.
What a nasty bug!
Need to research if further, but if you know the original width of .content, then you can add the same negative margin to it: http://jsfiddle.net/kizu/cpA3V/7/ — so it would compensate the original width. And if you'll need to animate the accordion, you'll just need to animate the margin alongside the width.
Try with this
.slide {
float:left;
width:25px; /* width added here (same width of '.handle' ) */
}
Example : JSfiddle
If you give the .content a width of 1px, then it behaves correctly. I can't explain what's happening but you can solve this by using display: none instead of the width.
In my CSS file I use this:
html,body{height:100%;padding:0;margin:0;border:0;}
Which causes a vertical scrollbar to appear on IE8, Chrome 5 and Mozilla 3.6, all latest version.
Also, the document is empty, it only has the html, head and body tags so nothing is going out of screen to cause that.
Setting overflow:hidden; on the html element will completly stop scrolling on the page.
How can I make it go away please but also keep scrolling when content is higher than display height?
Thank you.
I need 100% height in a XHTML document so that I can have div elements with 100%.
Anyway, I found the answer:
This problem only occurs when the top most element has a top margin.
It seems that that top margin gets added to the 100% height making it higher and causing the scrollbar.
So either use padding-top to space the top most element or use a with no top margin between the tag and the next element with a top margin.
overflow:hidden should help and prevent the display of scroll bars (you'll likely lose ~1px of content due to rounding errors
There may be better ways but I simply default to 98% which seems to obviate scrollbars in all browsers.
you could also set the height using JavaScript but that feels a little hacky
I ran into this issue today and found the scroll bar wasn't caused by a top margin on the first element, but by having BOTH the html and body elements have a height of 100%.
So, using this CSS rule:
html,body { height: 100%; }
I get scroll bars. If I change that to this CSS rule:
html { height: 100%; }
I get no scroll bars.
Peace...
The vertical scrollbar is coming because of height:100%. You don't need that unless there is a reason for you to use that.
Why are you setting 100% height in body?
It will get this height by default.
It makes sense to set height in body only if you want to set a numeric height in px such as lets say 600px
When I resize window and when vertical scrollbar appears, if I scroll it way to the bottom, - the bottom breaks. I dont understand why, but I think it has something to do with the way how page uses 100% height. Any help would be appreciated!
Here's the page: zxsdesign.com/main1.html
Here's a screenshot
zxsdesign.com/bug1.PNG http://zxsdesign.com/bug1.PNG
It's a mix of you using the CSS height property and absolute positioning. ajm has talked about using min-height - ideally, you should be using it instead of height when you make things 100% high.
Onto your other problem. When you position elements absolutely, they're no longer part of the page structure. Instead, they live in a separate plane, and so do not affect the page dimensions. When your <div id="flashcontent"> runs past the window boundary, it doesn't affect <body>'s borders.
You can fix this by not using position: absolute. There's no real need to. Instead, you can position the #flashcontent element normally, and get rid of the #bg element completely - just give #flashcontent a background instead. Then use margin: 0 auto; and padding-top: 179px; to position it in the correct place.
Unfortunately height: 100%; is implemented differently... You can not be sure that a browser does what you want when you use it.
Try to use clear: left; or clear: both; in your style.
100% height is one screen height. If you scroll up, it does cover 100% of the height. Make your blocks scale too, or at least move to the center of the screen. You can do this by setting their top and bottom padding to auto.
Also, your head tag isn't closed properly. Check this
Your page is based entirely on using 100% height for all of your Elements. If the user's browser viewport is big enough, that's fine; however, if they resize their browser to be small enough, your page will be 100% of that smaller height and things will drop out of the bottom.
Look into setting a min-height on one of your container Elements. That will force things to stop resizing if the browser window falls below that height. Or, you can set a plain old height big enough to contain your flash piece on one of your container items and let the others inherit from that.
And, since IE6 doesn't support min-height (FF2+, IE7, Safari all do), you'll need to hack it in like so.