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.
Related
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 9 years ago.
I have tried looking at similar questions, but I can't seem to find a solution. I'd appreciate it if someone could take a look here and see why the sidebar is not extending to the bottom of the content div: http://robert.io/posts/1.html
I definitely don't want to use Javascript for this. I appreciate the help!
The quick fix is to add these:
body { background-color: #2C3B63; }
#content { background-color: white; }
Make the following CSS changes:
<style type="text/css">
#page {
display: table;
height: 100%;
}
#sidebar, #content {
display: table-cell;
float: none;
clear: none;
}
#sidebar {
vertical-align: top;
}
</style>
Tested on Chrome 26 (OS X)
You can fix this by changing one line of code in your CSS: position: relative
#sidebar {
position: fixed;
}
But with how you have things setup, it causes your content to sit behind your sidebar. So just adjust your margin-left for #content. I plaid around with it, and looked about right around 325 (if I remember correctly).
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.
There's a ton of questions about 100% height elements. There's also a ton of questions about how to keep footers down. Well, this is yet another one...
I've been building a site and I have problems with positioning my footer and having 100% height elements on the page. My page looks currently like this.
I've tried almost everything I could possibly have found but nothing seems to work. If you look at the CSS code, do you find something that breaks the footer positioning and the height settings?
Check out The css sticky footer
You want your HTML To resemble this:
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
So, in your example (your website) you would want the footer to be outside of the container. From here you can simply check the CSS on the link provided above and your footer will stick to the bottom of the page while your DIV expands full height.
#contentWrapper{
padding: 0;
margin-left: 230px;
height: 100%;
background-color: #FFFFFF;
overflow: auto; /*I added this*/
}
#grass {
background: url("../images/layout/grass.png") repeat-x;
width: 100%;
bottom: 59px;
height: 248px;
position: fixed; /*Change absolute to fiexed*/
}
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.
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.
I try to place a div on the right side of another one. I didn't succeed.
Here is a jsFiddle: http://jsfiddle.net/Xn5uh/
I would like the main-content (colored in red) to be on the right side.
Any idea?
Thanks.
Fix spelling in overflow:auto;
.main-content
{
overflow:auto;
Define float in your .main-content also. Write like this:
.main-content {
background-color: Red;
border: 1px solid black;
float: left;
width: 600px;
}
OR
Define overflow:hidden in your .main-content
.main-content {
background-color: Red;
border: 1px solid black;
width: 600px;
overflow:hidden;
}
In your example your overflow spelling is wrong
Check this http://jsfiddle.net/Xn5uh/5/
There was a typo on the maincontent class. see the updated fiddle
overflow:auto; /*was ooverflow */
for the .main-Content add float:left.
DEMO