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.
Related
How do I get rid of the white space on either side of my website?
I want the backgound to be flexible to fit the browser window for whatever size it is. I think I need to resize the div container but I'm having lots of trouble.
http://www.dropshiplounge.com/
Your website was built using a fixed width and a margin that aligns it in the middle of the page using this rule in your css.
margin:0 auto;
Everything within your site has been built to within the specification of your wrapper width. Most responsive sites still have a page wrapper and a maximum width. If it's the white space that bothers set a background to the body element
body{background:color;}
or for an image
body{background-image:url('background_image_url')}
While im not the biggest fan of W3C refer to this for more information if you get stuck - http://www.w3schools.com/css/css_background.asp
If you are concerned that your site doesn't respond to different screen sizes and browser resizing then consider hiring a professional to redesign your site for responsive design.
Is this fiddle more or less what you're looking for?
I removed the hard-coded width on global_container_ and set width: 100%; on the header, along with repeat-x for the header background. I removed float: left; from the header and it's child elements, and made sure the child elements had left- and right-margins of auto. I also removed the hard-coded width from the headline, but you'll have to move the bottomline outside of it's container if you want that full-width as well (or remove the hard-coded width from the container).
Also, I don't think I had to change this in the fiddle, but you may need to remove the clearfix class from global_container_, or set it to display: block; in order for the full width to take effect.
It's the same idea for the footer - set it to width: 100%; and adjust the footer and child elements' padding and margin until they're placed where you want them.
I have overflow-x:hidden placed on the body tag of my page so that any content extending beyond the window will not be visible. No scroll bars show up, however, I can still scroll to the left / right to see the content (kinda defeats the purpose of overflow-x).
-ms-overflow-x: doesn't fix the problem either.
There is a wrapper 900px;
Inside the wrapper, there is a div inside:
width:100%;
padding-right:300px;
position:absolute;
left:200px;
I would like the inner div to hang over the right side of the window without causing it to scroll (and leaving a 200px space the its left).
Any help? Thanks!
Since the width of the div is 100%, there should never be an overflow, since the div will always fit 100% of the viewport (assuming you haven't changed the size of your body tag).
As for the padding, the padding is added on after the width, so you're saying the div is 100% of the width of it's container (the body tag), and the padding is an additional 300px to the right, which will be invisible as it's out of the viewport.
You might want to try giving the div an explicit size width and experiment that way.
It may help to see an example of your markup as well, to get an idea of what you're trying to achieve.
More HTML/CSS would be useful, but given what you have right now, my first thought is that your wrapper is still set to position: static (the default for HTML elements).
If you add position: relative to your wrapper, it will contain the absolutely-positioned element within it, and should constrain it to the overflow restrictions.
Additionally, you may want to look into the box-sizing property and how the W3C box model works. In short, your padding is adding to the width of the element, so it's actually (100% + 300px), which results in a size that is larger than the container.
If you don't want to mess with box-sizing, you can also add max-width: 100% to your absolute div to force it to not grow out of its container.
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/
I have a small web app I'm designing and I have a real weird problem. The inner content will always cut out below the page fold - you can't scroll down to read all of the text. I've tried this in Mobile Safari and on my desktop in Chrome/Firefox with no success.
The live URL is http://byjakewithlove.com/code/mobile-webapp/
Any suggestions I could try would help a lot. I basically have div with the ID #content and that holds the white BG and page text. I've got overflow: auto; which should create the scrollbar inside this div, and even have height: 100%;. I'm totally perplexed about what the issue is - again thanks in advance for any help!
you can keep the height: 100% on the content element, but position the header element using absolute positioning (don't forget to set their parent's position to relative, of course) to stick it to the top, while setting a padding value to the content element that correlates with the header's height.
the height: 100% is misused - "100%" refers to the container's height, so it's calculated for the parent, thus resulting this behavior.
simply omit the height: 100% declaration and set a fixed height.
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