Two same sized elements displaying different width - html

I'm laying out a website design and I have run into an error...
The html element is assigned a fixed width of 800px, the body element ID 'page' will not take up 100% width no matter what I try?
Heres the code...
<html>
<body id="page" >
/ content /
</body>
</html>
html {
width: 800px;
margin:0;
padding:0;
}
#page {
}
I have tried setting the #page to 'width:800px', 'width:100%', 'margin:0', 'margin:0 auto', etc. but no matter what there is always a 1px gap on the right side of #page. I've even tried setting 'width:801px' which didn't work, as well as setting the relative position left 1px in case it was overflowing left for some reason, but it's not...
Am I missing something stupid, is the program I am using buggy, or is it something else? Where I am from, 800px is the same as 800px so what's going on?
Thanks guys....
EDIT:
So, going back through previous projects I discovered what works for me. Whether it be the program I am using(free), or just something I'm missing this is what works for me and so resolves my issue.
<html>
<body>
/ content /
</body>
</html>
html {
width: 800px;
}
body {
margin: 0;
}

There's probably some extra css sneaking in somewhere. Check for any border property on your #page element.
Run this snippet, and there shouldn't be a single pixel gap.
html {
width: 800px;
background: lightgrey;
}
#page {
margin: 0;
border: none;
background: yellow;
}
<html>
<body id="page">
/ content /
</body>
</html>

it appears you are running into an inconsistency problem in the way browsers inject scrollbars into the page, see here:
Styling the `<html>` element in CSS?
I would start by using a css reset like normalize.css to get cross-browser consistency in behaviour then use your custom styles from there. Personally I never style the html element and work from the body down. Working like that I dont encounter these kinds of problems becuase they are dealt with by normalize.css.

Related

Blank space at bottom of page outside the html tags on mobile after giving a width that exceeds 100% to an element

Honestly believing I must be the first to encounter this problem after
searching the web for quite a bit, I decided to present this issue to
you.
The issue
The issue I am facing resembles a "blank space" that lives at the bottom of my page. It's only visible on mobile and I haven't been able to replicate the issue on desktop, however going into developer modus on chrome and visiting my website, I can see the problem.
When using the developer mode in chrome and checking all the elements, it becomes apparent that the "blank space" is nothing. It holds no information and it doesn't seem tied to any element.
However, after some digging it was found it the "blank space" only pops up after giving width to an element. And not just a width, but a width that exceeds the view-port.
Something else that caught my attention is that the height of this "blank space" is the same as the view-port height.
What am I trying to accomplish
You might wonder why I am setting a width exceeding the view-port, my reasoning for this is because I am trying to build a mobile(only) website that uses horizontal scrolling as a way to paginate between different content.
My goal is to accomplish this solely using css3 and html, no jQuery, no JavaScript and preferably not any ready-made plugins.
So far the "horizontal scroll" gives me the desired effect apart from the massive amount of white space it gives on the bottom of my page. I'd like to invest my time into trying to "fix" it rather than replacing it.
Recreating the issue
The easiest way to re-create my issue is to start off with a blank html file and give it the following elements:
<div id="wrapper"> ... </div>
And inside the wrapper put:
<div class="content"></div>
<div class="content"></div>
Then in your css file put the following styles:
body {
margin: 0; padding: 0;
}
#wrapper {
width: 200vw;
height: 100vh;
}
.content {
float: left;
width: 100vw;
height: 100vh;
}
And don't forget to include a meta tag in the <head></head> for the view-port:
<meta name="viewport" content="width=device-width, initial-scale=1">
For a live example, please check my JSFiddle.
Edit:
Adding some screenshots of my chrome developer tool to visualize the issue.
See here the actual website content, as you can see all is like intended.
The width is 200vw and height is 100vw.
See here the issue captured as a "blank space" like described in the OP.
Notice that the blank space stretched to twice the height of the height: 100vh as set in the css styling. Width stretched as far as the content, width: 200vw.
Chrome developer tools screen-size in device modus (CTRL - SHIFT - M) is 360x640 (width x height).
The issue is when there is a width > 100vw so a horizontal scroll bar appear and take a height from the page height so a new vertical scroll bar appear and affect the height of the page
Here is the issue
So the solution is to give body a width of 100% then overflow-x:hidden
and then it become
Edit
and here a new screenshot with device dev tools enabled
body{
margin: 0;
padding: 0;
display: block;
width: 100%;
overflow-x: hidden;
}
#wrapper {
width: 200vw;
height: 100vh;
}
.content {
float: left;
width: 100vw;
height: 100vh;
background-color:#eee;
}
<div id="wrapper">
<div class="content"></div>
<div class="content"></div>
</div>
and updated FIDDLE
Have you tried:
body {
margin: 0;
padding: 0;
height:100vh;
overflow-y:none;
}
Your code works great when I tried it out:
http://codepen.io/staypuftman/pen/qZZxRG. Toggle the background elements and you'll see it works just as you want.
The only difference is that I used normalize.css behind the code. Perhaps this gets a code gremlin you might have missed. Normalize is a great way to get rid of some HTML oddities and it's very light weight.

How to force the body tag to contain children

https://jsfiddle.net/17nc164k/1/
I've been searching all evening and had no luck finding what I'm after, so I've resorted to asking the community here!
I'm currently developing a Wordpress plugin that adds a fixed newsletter signup bar at the bottom of the page. As this is position:fixed it's taken out of the flow, and as such the issue is that it overlaps the bottom of the page. To fix this I've added this code which creates some space after the body tag:
body:after {
content:'';
display:block;
height:52px;
width:100%;
}
This works well, but when testing with different themes I noticed for some reason on some of them the <body> tag is collapsed, it has no height whatsoever. As a result the body:after is right at the top and not doing its job adding a space at the bottom. My thoughts are to fix this is to get the <body> tag to expand and contain it's children, that however seems easier said than done.
Nearly all the suggestions I've seen say this:
html { height:100%; }
body { height:100%; min-height:100%; }
Currently on this theme the <html> element is fine, and contains the whole page (838px height) but if I add html { height:100%; } it goes to the height of the viewport. But without adding that the body { height:100%; } code does nothing.
There are a tonne of questions out there about expanding the <body> to fit the viewport, but I've not found anything that solves this yet. Totally happy to be proven wrong as I'm sure it's addressed somewhere but after a couple of hours of head banging and no light at the end of the tunnel I've resorted to asking here.
The min-height should apply to both the body and the html:
body, html { min-height: 100% }
This way, both will take up at least the viewport height, but will expand more if the content is more than the viewport height.
Update: if the body has no height because it's contents are floated, you can set clear: both on your :after element.
Don't use the :after pseudo element. Just give the <body> tag some padding at the bottom. It will be much more cooperative and also has better browser support.
body {
padding-bottom: 52px
}
If the html element has the correct height, you could set the body element to:
body{
height:inherit;
}
This should set it to have the same height as the html.

min-height|height html, body acting strange

I'm working on a website that have pages that exceed 100% browser window height and ones that do not. So, what I need is the height to be at least 100% but higher if applicable.
My current CSS looks like:
html, body {
min-height: 100%;
height: auto;
}
This initially seemed to work fine but then I realized that <body> does NOT have the same height as <html> but rather seems to use the standard height. It is like <body> does NOT respect the min-height property.
Hopefully, someone can toss some ideas or shine some light on this.
UPDATE1 It seems like HTML is acting as if it was default too..
UPDATE2 http://jsfiddle.net/rpz4rd4c/5
UPDATE3 According to the suggested comment by ( MichaelHarvey ) the body height is relative to the html height ( not min-height ) if that was true the following code should work:
html {
min-height: 100%;
height: auto;
}
body {
height: 100%;
}
However, it doesn't.
FINAL UPDATE
The solutions provided on this page "work" however they might be buggy with JS plugins. I would recommend people to use 100vh solution or the one I accepted as answer ( mainly because it requires no CSS3 ). I guess a 100% accurate solution to a problem like mine (having all dividers and elements 100% non-related to browser window) would be to simply use inline CSS and use min-height at longer pages and a height at browser fitting ones. This might require some JS.
<3
This seems to work with Chrome:
html {
height: 100%;
}
body {
min-height: 100%;
height: auto;
}
http://jsfiddle.net/rpz4rd4c/10/
Of course, this means the html element never takes the full child's height (only the viewports). Hopefully that's not an issue.
Viewport units to the rescue! The vh unit in CSS works relative to viewport height regardless of parent elements and all that fuss. Here's the CSS you should put on the body:
body{
min-height:100vh;
margin:0;
}
See http://jsfiddle.net/rpz4rd4c/3/ for my working example
EDIT: for your other elements that also need to be at least 100% height, just add min-height:100vh to their CSS styling as well. Thanks #misterManSam!
Without really understanding the why, perhaps this is what you're looking for?
html:
<html>
<body>
<div class='wrapper'>
<div class='inner'>
<!-- your content here -->
</div>
</div>
</body>
<html>
css:
html,body{
height:100%;
overflow:hidden;
}
.wrapper{
height:100%;
overflow:scroll;
background:#f9f9f9;
}
The html and body are always 100% height, and no matter what the content length it will still scroll. Not sure on the side effects of locking the html/body scrolling (lots of potential issues) however, so I'd be wary.
Example: http://codepen.io/jessekernaghan/pen/GocHg

HTML CSS body autosizing

I know there's a lot of questions on this type of thing, but I haven't found one that answers my question. I have a "news feed" format site where you can filter the posts based on certain criteria. So, with some filters, you get content much taller than the browser window. With other filters, you can get no content.
When I use Webkit's Web Inspector, I see that an html {min-height:100%} does the trick for the <html> tag. I want the <body> to do exactly the same thing: be 100% when the content fits on the page, and expand otherwise.
However, I can't use a percentage height or min-height on the body when the height isn't set for <html>. It doesn't inherit a height to base its percentage off of. So what I end up with when the document has less than a full window of content is everything getting clipped off right and the foot of that content, which screws up my background and stuff.
Any ideas?
Maybe you can try something like this:
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#content {
min-height: 100%;
}
I hope this helps solve the issue
From the limited details it sounds like all you need is to add is:
html,body{ height: 100%; }
And I am guessing that your background is on the body tag.
My suggestion is to set the height of the body to 100%. 100% means, that it should take equally much space as its parent element. So, if your html tag does what it's supposed to, just let the body tag take the same size:
<html style="min-height: 100%">
<body style="height: 100%">
</body>
</html>

Footer background should extend to bottom of browser

I have a problem with fixing the footer to the bottom of the browser .. The problem is when resolution changes or windows resizes the footer content overlaps the content of the website, here is the current css for footer div
div.footer {
position:absolute;
bottom:0px;
}
Does anybody knows how can I fix this? Thank you
UPDATE:
This is what I need exactly but for some reason it doesn't work for my web page, it does work when I cut paste code to the blank page, but since my page is full with content and everything, what are the important elements to include? Hereis the url.
The above trick works only if my website has filled content if I have some lets say few lines the above trick doesn't work.
UPDATE II
My website has dynamic content so I think can't use this sort of CSS Sticky footers because sometimes the website will just have few lines sometimes be packed with content. Thats why the footer is not sticking to the bottom of the webpage.. its not problem to stick the footer if there is plenty content on the website the problem is without.
What you have here is a common problem for which there is no common answer, but what I would try if I were you since all these above suggestions apparently aren't working, I'd try to set my page container background to any color let say white (#FFFFFF) and I'd set background color of body to any other then white let say grey (#CCCCCC). And finaly set footer position to relative and of course it must be placed after everything if you want it alway to be at the bottom. This way you'll get what you need 100 % sure if you follow step by step instructions.
Checkout CSS Sticky Footer for an excellent cross-browser compatible method.
What that site essentially does is make the footer stick BENEATH the browser edge, and gives it a negative margin that has the same value as the footer's height. This way, the footer is sure to stick to the bottom.
You can add a push div to the last element before the footer in order to always assure that the footer doesn't overlap the content.
Given this example:
<html>
<body>
<div class="header" />
<div class="content" />
<div class="footer_push" />
<div class="footer" />
</body>
</html>
If <div class="footer" /> is always 75px high, use the following CSS:
html, body { height: 100%; } /* Take all available vertical space */
/* Push the bottom of the page 75px.
This will not make scrollbars appear
if the content fits already. */
.footer_push { height: 75px; }
/* Position the footer */
.footer { position: absolute; bottom: 0; height: 75px; }
Basically you need to give the footer a fixed height and to push the footer with another div of the same height to the bottom. There's however more browser specific stuff which you need to take into account:
The html and body must besides having a height of 100% no (default) margin to avoid the footer being pushed further to below that amount of margin.
The p and div elements throughout the page must have no margin-top to avoid the footer being pushed further to below that amount of top-margins in under each Firefox.
The "container" div must use min-height of 100% instead of height to avoid the footer to overlap the remaining of the content. IE6 which doesn't know min-height just works fine with height, so you'll need to add a * html hack for this.
All with all, here's an SSCCE, just copy'n'paste'n'run it:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>SO question 1900813</title>
<style>
html, body {
margin: 0;
height: 100%;
}
p, div {
margin-top: 0; /* Fix margin collapsing behaviour in FF. Use padding-top if necessary. */
}
#container {
position: relative;
min-height: 100%;
}
* html #container {
height: 100%; /* This is actually "min-height" for IE6 and older. */
}
#pushfooter {
height: 50px; /* Must be the same as footer height. */
}
#footer {
position: absolute;
bottom: 0;
height: 50px;
}
</style>
</head>
<body>
<div id="container">
<p>Some content</p>
<div id="pushfooter"></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Edit: after more testing I realized that this indeed does not work in IE8 (I still consider it as a beta so I didn't really use/test it, sorry about that), unless you let it render in IE7 compatibility modus (insert sad smilie here) by adding the following meta tag to the <head> (which I already added to the SSCCE here above):
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
or to let it render in quirks mode by using a "wrong" doctype (either remove the <!doctype> or pick one of the doctypes associated with painfully red Q boxes in IE here). But I wouldn't do that, that has more negative side-effects as well.
And, surprisingly, the http://www.cssstickyfooter.com site as someone else here mentioned here which used an entirely different approach also did not work in IE8 here (try to resize browser window in y-axis, the footer won't move along it as opposed to other browsers, including IE6/7). That browser keeps astonishing me. Really.
Try setting the footers Position to relative and playing around with a negative top margin to get it how you want it.
What you're looking for is a Sticky Footer, you can find a lot of resources like this one: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
try this:
#wpr{
display: table;
height: 100%;
width: 100%;
}
.dsp-tr{
display: table-row;
}
.dsp-tc{
display: table-cell;
}
#ftr-cnr{
text-align: center;
vertical-align: middle;
}
#ftr{
background-color: red;
padding: 10px 0px;
font-size: 24px;
}
<div id="wpr">
<div class="dsp-tr">
<div class="dsp-tc">
body
</div>
</div>
<div class="dsp-tr">
<div class="dsp-tc" id="ftr-cnr">
<div id="ftr">
footer
</div>
</div>
</div>
</div>
display: table does not make it a table, a <div> is still a <div>, it just tells the browser to display it as table.
i tested it in chrome and firefox
let me know if it works for you.
We had this problem a few times. We could not find any cross browser CSS only solution. We finally resorted to JQuery. We wrote our own (i can't publish) but this one http://www.hardcode.nl/archives_139/article_244-jquery-sticky-footer.htm looks promising:
$(function(){
positionFooter();
function positionFooter(){
if($(document.body).height() < $(window).height()){
$("#pageFooterOuter").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#pageFooterOuter").height())+"px"})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});
Do you have a DOCTYPE declaration in the top of your HTML?
If so, there is a good chance I have a solution for you.
I was trying to do a height:100% table or div (assuming this is a basic cornerstone to the expanding footer feature)
No matter what I did, the 100% height didn't work! the elements just didn't stretch...
I narrowed it down to a very basic HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test1</title>
</head>
<body>
<div style="border: 2px solid red; height: 100%">Hello
World</div>
</body>
</html>
but the DIV didn't stretch all the way down (the 100% was ignored). This was true also for tables with plain height="100%" attribute.
As a desperate last result guess, I removed the DOCTYPE row, resulting in this code
<html>
<head>
<title>Test1</title>
</head>
<body>
<div style="border: 2px solid red; height: 100%">Hello
World</div>
</body>
</html>
And it worked!
I'm sure there is a good explanation, but I really didn't care since it solved the problem
Update
See related question (asked by me)
Depends on what you want to do. I you want it to be always visible on the bottom of your screen, you should use
div.footer{
position: fixed;
bottom: 0;
}
Be sure to get some padding on the bottom of your body (or container, so that people can actually scroll to the bottom of the text). The main problem here is that when resizing everything it will overlap.
If you just want to have a footer that has a background-image / colour that stretches all the way till the end (for pages that are not fullpage height) you could try to use a faux column principle or even try to give your body the background colour of your footer and fix the header / content background.
Today I stumbled across this page:
http://www.xs4all.nl/~peterned/examples/csslayout1.html
Could be helpfull
I came up with a fairly simple solution that doesn't use any CSS height hacks or any of that.
You just set your <body> with the background you want the footer to have, and then put everything besides the footer in a <div> with the properties you would normally give to the body tag.
This gets the footer to "extend" its color to the bottom of the page when there is short dynamic content without expanding it needlessly when there is a lot of dynamic content. The "virtual body" div can still have a gradient followed by a solid color, and the footer's background is hiding in the body tag, only showing up on short pages. (Works great if you need a solid color to continue after your footer gradient ends, or if you just need the background to match the footer color)
CSS
body {background-color: #000; }
#primary_container { background: #FFF url('/images/bgvert.png'); background-repeat: repeat-x; }
#footer { background: #000; }
HTML
<body>
<div id="primary_container">
<!-- most content, can be short or long -->
</div>
<div id="footer">
<!-- if primary content + footer is less than browser height, body background color
displays below this. If it is more, you get normal scroll behavior to the end
of footer and body background color is never seen -->
</div>
</body>