This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
On my website I have whitespace on the right of my page, but all widths in the page are set to 100%, including the color of the page. So even if there was a width that was extending outside the page, this part should be the same color as the rest.
I am using an anchor based website, and if you look at it http://www.jeremyspence.net78.net/ you can see that only on the first anchor is there whitespace on the side, but there is extra space on the side all the way through (obviously). I don't want either the whitespace or the extra space, but the whitespace is perplexing. And yes I have margin: 0; and padding: 0;
Understanding the box-model
In your site, the classes websitecontainer, packagecontainer and mecontainer all have the following style rules:
...
width:100%;
padding:50px;
...
This literally means that they should span the full width of their container (the body in this case) and then the browser should add 50px of padding around that width. This is the way it should be according to the W3C standard box-model that is used by modern browsers. In outdated versions of IE, the box-model would have worked the way it is currently setup in your page and the padding would have been subtracted from the width.
See the illustration below to understand the difference:
The solution
The straight forward solution would be to remove the padding from these containers, eliminating the extra width and redundant spacing. If you require that padding, you can simply wrap the contents of the current containers inside another container and apply the padding to this new inner container. For example:
<div class="some-container">
<div class="inner-container">
<!--Content goes here as before-->
</div>
</div>
With the style rules now being:
.some-container {width:100%;}
.inner-container {padding:50px;}
Your CSS here:
.homecontainer {
background:#ffe6ce;
width: 100%;
height: 1080px;
padding-top:50px;
}
Should maybe be:
.homecontainer {
background:#ffe6ce;
width: 100%;
height: 1080px;
padding: 50px 0 0 0;
margin: 0;
}
Note the addition of margin and the reworking of your padding to be shorthand format which basically runs clockwise from the top: 50px (top) 0 (right) 0 (bottom) 0 (left)
Replace your current CSS code for these styles with this
.websitescontainer {
width: 100%;
height: 1080px;
background: #cefece;
}
.packagescontainer {
width: 100%;
height: 1080px;
background: #cefefe;
}
.mecontainer {
width: 100%;
height: 1080px;
background: #fecefe;
}
Note: You can make this code in this way
.websitescontainer, .packagescontainer, .mecontainer{
width: 100%;
height: 1080px;
background: #cefece;
}
.mecontainer {
background: #fecefe;
}
It looks like removing
padding: 50px;
from .mecontainer solves it.
Related
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 3 years ago.
I don't quite understand why the footer (and the header) doesn't take up all the space?
I divide the <body> part in 3 sections: 1) div header, 2) div wrapper, 3) div footer (so that I could control each part separately).
Div wrapper (which is supposed to be narrow)
.wrapper {
display: block;
width: 100%;
max-width: 980px;
margin: 20px auto;
padding: 20px;
border: 1px solid black;}
Div footer (which is supposed to be 100% wide on the screen)
.footer {
margin: 0px;
padding: 0px;
background-color: black;
height: 200px;
color: orange;
width: 100%;}
How can I make it cover all the space (like on this website, the header takes all the space, but the main content part is way more narrow).
Thank you in advance!
The footer (which is black) doesnt take up all the space and leaves some background
The footer (which is black) doesnt take up all the space and leaves some background
Seems like you didn't reset the default margin for body which most browsers add by default. To do so, add this:
body {
margin:0;
}
There's more than one way to solve this and there's more than one reason for which the problem could be generated in the first place, so don't tread if different people give you different answers :)
The problem I most usually see when this comes up is generated by a father element not having full width, or having a padding that's bigger than zero. (Probably the body.)
If that's not where the problem lies, then try with these media queries (One at a time).
width: -webkit-fill-available;
width: 100vw
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I've tried this seven ways from sunday and I keep coming up short.
Bands of color or what have you that extend to the limits of the visible page seem to be a very common request in internet forums / blogs, however for each of the two main scenarios I'm running into equally frustrating issues that render either solution untenable. In my frustration I've turned here.
HTML
<body>
<div class="container"></div>
<div class="content-container">
<div class="content">
Hello, I need some text that extends for a bit, so I'll just write this in the div and all will be good.
</div>
</div>
<div class="container"></div>
Scenario 1
You set a container div at width: 100% and then a child div at a fixed width and margin: 0 auto; this effectively extends that div to the ends of the visibel screen at all times.
html, body {
width: 100%;
}
.container {
height: 20px;
background-color: #377ab7;
margin: 0 auto;
}
.content-container {
height: 100px;
margin: 0 auto;
}
.content {
width: 300px;
}
Scenario 1 issue
When the screen is resized so that the child div's fixed width is too big for the window a scroll bar appears. This is absolutely fine and desired, however when you use the scroll bar the extended bands of color only extend as far as 100% of the visible window.
Fiddle 1 (you need to resize the browser window to surpase the size of the fixed width content div and then use the scroll bar, you'll see the blue bands do not extend past 100% of the window size.)
https://jsfiddle.net/b1dht69u/2/
Scenario 2
You set the overflow-x: hidden on the body and then run a very high negative margin, with a corresponding positive padding.
body {
overflow-x: hidden;
}
.container {
height: 20px;
background-color: #377ab7;
margin: 0 -9999px;
padding: 0 9999px;
}
.content-container {
height: 100px;
margin: 0 -9999px;
padding: 0 9999px;
}
.content {
width: 300px;
}
This is absolutely great until again you try to resize the screen.
Scenario 2 issue
When you resize past the size of a child div's fixed width no scroll bar appears.
Fiddle 2
https://jsfiddle.net/mnodvLvg/1/
What I am looking for is the best of both worlds. I am hoping to have a bar of color that extends to the ends of the visible page at all times, yet when a browser is resized past an inner divs fixed width a scroll bar appears.
This is a curious problem, and one that I never gave much thought since I mainly work with responsive layouts.
However, there is a nice article by Nicholas Cerminara about dealing with fixed-width layout issues.
The key to this is setting a min-width on body{} and/or html{} in your CSS.
Interestingly, Stack Overflow uses this technique to prevent their top navigation bar from breaking when you resize the window. Just open your web browser DOM explorer on this website and disable the following style rules:
body{min-width:1030px;} and html{min-width:1000px;}
You will see the top nav bar break its layout and have the same issue you are experiencing.
this scenario 2 with 9999px stuff is actually very dirty, forget it.
If you inspect the div, you'll see that the problem doesn't come from the div.container itself but from the body.
I would solve this with:
html, body {
position: absolute;
min-width: 100%;
width: auto;
}
As a reminder, don't forget that the ID must be unique. Better use class in this case.
An other idea could be to forget those .container DIVs and actually make borders for .content-container, but I don't know what you exactly would like to do.
#content-container {
height: 100px;
margin: 0 auto;
border-top: 20px solid #377ab7;
border-bottom: 20px solid #377ab7;
}
Good Luck' !
If you have a fixed width for the content div, you may as well set a min-width of the same value or larger on the body tag. This will guarantee it can't be smaller than your content.
html, body {
width: 100%;
min-width: 300px;
margin: 0;
}
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
Here is the site i am building from scratch. Suddenly at one point browser scroll bar disappears. How to fix it??
MY WEBSITE
Use (ctrl + (+)) OR (ctrl + (-)) to zoom in or zoom out the website.
The problem you are having is that you have a lot of things that are position: fixed;
If you are doing this from scratch... I suggest you start over. I built THIS in jsfiddle in 3 minutes. This is how you would build a site like this now days. This is starting mobile first as well... so with some media queries and a responsive slider, you should have a much more solid foundation. I hope it is helpful. Fixed positioning pulls the content out of flow and then the browser doesn't see how "long" it is, and therefore removes the need for scrolling. As you using dream weaver or something? If so, I can see how this happened. You should probably go with an html 5 doctype as well. Take a deep breath and rethink this.
HTML
<header class="global-header">
<div class="inner-w">
HEADER
</div> <!-- .inner-w -->
</header>
<section class="main-content">
<div class="inner-w">
<div class="block">block</div>
<div class="block">block</div>
<div class="block">block</div>
</div> <!-- .inner-w -->
</section> <!-- .main-content -->
CSS
html, body {
margin: 0;
padding: 0;
}
.global-header {
width: 100%;
float left;
min-height: 150px;
margin-top: 20px;
margin-bottom: 20px;
background-color: lightblue;
}
.main-content {
width: 100%;
float: left;
}
.inner-w {
margin: 0 auto;
max-width: 900px;
}
.block {
width: 100%;
float: left;
background-color: #f06;
min-height: 200px;
margin-bottom: 20px;
}
Don't Use position: fixed on everything. It takes them out of the flow of document. Use position: fixed for top blue banner if you want. But for rest, remove it. This will set it to position: static (default) which will solve the scroll problem
This is extremely wrong way to post a question.
But, I firebugged your site and found out that every thing has fixed position, that is the reason you don't have the scrollbar. use relative position
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I'm working on a page there:
I'm a newbie and followed a tutorial there: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
The footer is at the bottom but the height of the page seems to be bigger than it should be and there is a scrolling bar on my browser, anybody can tell me why ?!
The extra height seems to be coming from the padding-top on #footer-container, the border on #footer, and most significantly the margin on #masthead-container (changing this to padding on #content-container seems to fix it).
Getting rid of all of those, eliminates the scrollbar.
The <footer> has a padding-top which should be counted in the box model. So the actual margin bottom of wrapper should count both the height and padding of the footer. Look into the html box model for more details! It'll surely be fun :) And also, use Chrome developer tools or Firefox firebug to speed up your learning process
Your link doesn't open. But maybe you can do something like
body {
height: 100%;
position: relative;
}
.footer {
position:absolute;
left: 0;
bottom: 0;
}
I have done some changes in your the style you wrote. just replace your code that is written for #footer.
#footer {
background-color: white;
border: 1px solid #D2CECE;
border-radius: 5px 5px 0 0;
box-shadow: 4px 5px 3px 1px rgba(0, 0, 0, 0.2);
clear: both;
height: 200px;
margin-bottom: 0;
margin-left: 193px;
position: fixed;
width: 960px;
}
I have set the left margin as 193px which you need adjust.
you should add a main container div to contain all mark up in the .
like
<body>
<div id="main">
<!-- all the markup (HTML code) -->
</div>
</body>
so by applying style to "#main" you can make all the contain center align and no need to give left or right margin to make it center.
I'm using a sticky footer for the first time with a site I putting together, however doesn't seem to be going as planned. There appears to be a large white space, and then a black area (this is the color of my footer) please see link http://c-hall.the-word.com/assignment/whatwedo.php I need the footer to butt up to the bottom of the last bit of content, in this case the text witch is yet to be styled. Please see code below - thanks for your help - Charley
CSS
/* sticky footer */
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -335px;
}
.footer, .push {
height: 335px;
background-color: #000;
}
#innerfooter {
width: 847px;
height: 335px;
position: relative;
background-image: url(../images/black_bar.png);
background-repeat: no-repeat;
text-align: left;
margin: 0 auto;
}
/* end sticky footer */
Try this out for size, this will stay at the bottom of the page if the content isn't long enough and prop up the bottom if the content reaches it http://ryanfait.com/sticky-footer/
Look at your html structure (Especially at the .wrapper div.). The placement of the div is wrong.
And read this link: http://www.cssstickyfooter.com/
You are always going to have this gap because the position of your footer is static so it's fixed to the bottom of your browser. This white gap is your body background width unused space. So fill it or eliminate it by less width of your page or any other approach you find appropriate !
The point is I'm not giving you a precise solution but it's more important to understand what you're doing not just applying tutorials.