My webpage http://www.pointmovies.com/ is showing scroll bar at the bottom and it looks like it has so much empty space on the right side. I can't figure out what is increasing the width of my page and how can I remove this.
It is wordpress, every post is an article (image) having width of 18% and float left, so on one row 5 posts/articles will display. But because of this 18% width I see that my page width increased. When I remove this 18% from the article css, page go to normal.
This is the css for article
width: 18%;
float: left;
margin: 0px 0px 0px 21px;
min-height: 400px;
Here is the screenshot. Please check the below scroll bar which should not be there.
Add
#main {
overflow-x: hidden;
}
to your css.
For your other issue.
The Style for the first div after #main should looks like this. That is why your site is not going responsive properly.
margin: auto;
width: 100%;
max-width: 1170px;
display: inline;
Tamoor, the overflow-X disables it from left to right.
Add this CSS to fix it:
#page{
overflow: hidden;
}
Related
I've spent 2 days trying to sort this out and I can't. I'd appreciate any help.
I have a container set to fill 100% vertically, which it does just fine. In the container I have another div for my header. Underneath the header, I want another div to also fill vertically 100% (from the bottom of the header to the bottom of the screen) regardless of how little content there is. The problem is, when I set the height for this div at 100%, it overflows past the bottom of the browser window, even if there is no other content in it. Just a long blank space. The overflow is the same size as my header.
If I remove my header, it works fine. And if I tell this div to not be 100%, then it will only go as deep as the content forces it, which won't be enough in some cases. I tried using overflow: hidden, but then that hides the shadow effect I have on the div.
You can view the page here
And the code in question is here:
#container {
height: 100%;
position: relative;
width: 960px;
margin-right: auto;
margin-left: auto;
margin-bottom: -80px;
}
#bodybox {
height: 100%;
width: 960px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: -80px;
background-color: #FFF;
-webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
}
You'll notice my footer is hovering over the bottom. That's because of the overflow. I'm using this sticky footer solution in case that's important.
I'm a bit of a novice at CSS and I really want to avoid excessive Photoshop usage or tables, but I can't seem to get any tip or suggestion I've read to fix this. Please help. Thanx.
try
#bodybox{
height: calc(100% - 142px);
...
where 142px is the height of the header. Calc calculates the height according to the arithmetic in the parentheses. Note the equation will not more without the spaces before and after the operator. The same equation can be used to counter the effect of margins too.
If you set an element to have a relative height/width (with percentages), the height/width will be relative to it's direct parent (if some exceptions do not apply, I will not explain them here). But that doesn't take positioning into account. So your content div has exactly the height you asked it to be, but because it is pushed down by the header it appears to be taller.
You could use calc to calculate the height you want, or use the oldschool push back method.
You start with building the container, header and content div:
<div class="conatiner">
<div class="header"></div>
<div class="content"><h1>My Content</h1></div>
</div>
And apply some styles:
.container { width: 300px; height: 100%; } /* height can be anything */
.header { width: 100%; height: 100px; } /* header SHOULD have a fixed height */
.content { width: 100%; height: 100%; }
And to push back you add to the styles of the .content div: margin-top: -100px;, where the 100px should be the same height as the header. With the minus in front you tell the browser to pull it back instead of push it down.
Now you have two more problems to solve. The first one is that the content div covers the header div. You can fix that with applying z-index, although that requires you to add position too (as z-index only applies to positioned elements). So add those two rules to both header and content:
z-index: 1/0; /* header has z-index: 0, content has z-index: 1 */
position: relative; /* to 'activate' z-index 'behavior' */
Now we're almost there, but as you might see the content also disappears behind the header. To fix this, add a padding to the content div:
.content { padding-top: 100px; } /* again the 100px should be the same as the header height */
And now don't despair if you see the content div pushed down again. That is because the padding adds up to the height. Luckily my great friend box-sizing helps us out!
.content { box-sizing: border-box; -moz-box-sizing: border-box; }
And here we are (fiddle)!
Note: there are some other strategies, like, absolute positioning of the content div and/or header, using the calc functions, and others. Choose what suits you best.
Quick fix:
#header_bkgd {
overflow: hidden;
}
I'm guessing its to do with the fact that they both have a margin-bottom of 80px? one is taking off the other forcing it to overflow.
Do this:
CSS:
#bodybox{
margin-bottom: -80px; //Remove
// rest of the css
}
#container {
margin: 0
}
Website in question: http://www.flowersbe.com
So I am not having an issue getting the footer to stick to the bottom, my issue is that I have a top margin on my container that pushes the footer down 25px past the bottom of the browser, which is most evident on the contact page of the above site. I want to keep the 25px space at the top but I still want the footer to be fully visible...below is my css for the container and the footer...any ideas on how I can resolve this issue?
html,
body {
height: 100%;
}
#container {
width: 960px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 25px auto -50px;
background-color: #fff;
}
footer {
clear: both;
width: 960px;
height: 35px;
margin: 0 auto;
padding: 15px 0 0 0;
background-color: #ffebeb;
text-align: center;
}
.push {
height: 50px;
}
I believe that to achieve exactly what you want to do, you would have to introduce some JavaScript to calculate the exact height that #container should be.
It is translating the height of 100% to the exact height of the viewport, then adding the 25px margin on top of that. The only way I can think of to get around that is to use JavaScript to get the height of the viewport and set the height of #container to that value minus 25px.
Possible alternate solutions that don't involve JS:
Just drop the min-height and allow #container to be only as tall as it needs to be.
Use position: fixed on the footer to ensure that the footer is always at the bottom of the viewport, but note that it would sit on top of any content long enough to go beyond the height of the viewport.
Does that give you enough to go on?
I have a pretty annoying issue here. I am using a sticky footer i found on the web, which works perfectly, however I have some big images in the main content area which is overlapping the footer.
Any ideas? Link to live example - Click on interface to view
On your #wrapper you have a negative margin. take that out and it looks just fine
#wrapper {
width: 90%;
padding: 10px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto; /** Removed the negative bottom margin **/
overflow: hidden;
background: white;
overflow: hidden;
}
Your div #wrapper should have a padding-bottom equal to the height of the #footer, which in your case appears to be 96px. Surely the "sticky footer [you] found on the web" should have mentioned that!
I have a div and I've tried to set the height to 100% so the content of it makes the div grow to fit.
I've tried the following and it won't work:
Adding 100%:
#latest{ height: 100%; background: #e3e3e3 url(banner_grad.jpg) repeat-x; border: none; margin-top: 10px;}
Leaving having to height setting at all, so the div would just fit the content in:
#latest{ background: #e3e3e3 url(banner_grad.jpg) repeat-x; border: none; margin-top: 10px;}
Unless I set a specific height (e.g. height: 370px;) the div will not even show it's outline in design view in Dreamweaver. Very odd.
Any ideas?
Thanks
The height property will correct here.But instead of this use following code.If you go on adding content the div will also increase in height.
#largest {
background: url("firefox-gray.jpg") repeat-x scroll 0 0 #E3E3E3;
border: medium none;
margin-top: 10px;
overflow: auto;
}
Unfortunately you can not set heights of divs as percentages, mainly as content tends to make divs grow downwards, so you would be limiting yourself.
Take a look at the min-height css property though. That, I think, will go some way to sorting your problem.
Does the content of the div have a "float: left" or a "float: right" attribute?
html, body{
height:100%
}
div{height: 50%}
I don't know the browser compatibility of this so you may need to test it.
http://jsfiddle.net/ZKZFa/
may be you have to write like this:
html, body{
height:100%
}
#latest{
height: 100%;
background: #e3e3e3 url(banner_grad.jpg) repeat-x;
border: none;
margin-top: 10px;
}
I'm trying to make a page where I have a fixed height header and footer. The header is at the top of the screen (100% width) and the footer is at the bottom (100% width). I want to center a div with variable height content in the space between the header and footer. In the below jsfiddle, it works if the content is shorter than the space, but if the content gets too long, it goes past the footer, and over the header. It also doesn't work at all in IE (surprise, surprise).
Example: http://jsfiddle.net/VrfAU/4/
Edit: I've made some images to try and make this more clear.
Small content
Large Content
I ended up starting over and trying a different approach. The working solution is found in the new jsfiddle below. The idea was to separate the header and footer from the content area so that they would sit on top and bottom. Then it became much easier to center the content area in the space between those (with some hacks for older versions of IE).
http://jsfiddle.net/UYpnC/5/
Try something like this:
.main { min-height: 500px }
http://jsfiddle.net/VrfAU/8/
I used the css property z-index, which controls the stack order to fix this:
I also used position: fixed to fix the header and footer:
I put
#header {
background: black;
width: 100%;
height: 66px;
position:fixed;
overflow: hidden;
z-index: 20;}
.main_wrap {
display: table;
width: 100%;
height: 100%;
margin-top: -88px;
vertical-align: middle;
position: relative;
z-index: -1;
}
#footer {
background: black;
width: 100%;
position: relative;
font-size: 85%;
color: #d0d6e0;
margin-top: -22px;
position: fixed;}