I don't know why there is a quiet large space between content and footer here: jsFiddle
I've set margin-bottom, padding-bottom of content and margin-top and padding-top of footer are zero. But why it still have a space?
You are seeing the classical behavior of collapsing margins between the p tags in the content and footer.
You can fix this many ways, an example of which is:
body #container #wrapper {
margin: 0px 15px 0px 15px;
padding: 67px 0px 0px 0px;
background-color: white;
box-shadow: 0px 0px 10px 5px #969696;
overflow: auto;
}
body #container footer {
margin: 0px 15px 0px 15px;
padding: 0px;
background-color: greenyellow;
height: auto;
overflow: auto;
}
Set overflow: auto on your footer and #wrapper elements.
Also, set the height to auto on your footer to allow enough space for your text.
Demo at http://jsfiddle.net/audetwebdesign/9jMrR/
However, you have a box shadow at the bottom of you wrapper and you need to decide how you want that to work. If you want it to be visible, you will need to add a top margin to your footer.
You can add a negative margin:
footer {
margin-top:-20px;
}
This is kind of a bad way of doing this but you can apply a css rule of margin-top:-10px to decrease the space between the content and the footer tag.
footer{
margin-top:-10px
}
Related
So Wordpress has put all of my content in a p tag and it makes a white gap between it and the header. I can't figure out how to get rid of this gap! The image is classed as welcome.
I tried this but it still leaves a white gap
article p {
margin: 0;
padding: 0;
}
.welcome {
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
}
picture of gap with inspect element shown
SOLVED
Instead of using an img in this situation I used a div with the image as the background, no white space at all now. Thanks tho for everyone who replied.
This should do the job:
article p {
visibility: hidden;
width: 0px !important;
height: 0px !important;
padding: 0px !important;
margin: 0px !important;
}
I've got an issue when i try to put 2 divs, both them them floating to the left side, one with width 80% and the other the 20%. Then i'd like to draw a border on the right side of the first div and a box-shadow of 5px, because each div has a different color.
So I've just searched on this site and i've found this solution:
Border issue in Floating div
But it's bad idea IMHO.... i've a resolution of 1920px width and i can't put 48% for the width of a DIV.... for 4px border i'll got a white space in the webpage for the 2% - 2px.
You could say, just add the background color to the body: i could because each DIV has already it's own, but it's also a problem OF SPACE, PROPORTIONS!!!
Another problem i'm experiencing with: i've set the height 100% (on the second div, 20% width)and it works in the example; but in the real website, which is the height also set to 100% the DIV doesn't occupy the whole height of the column but just until the margin limit of the last image.
The last problem: box-shadow with floating div it's bad idea...
should i put the box-shadow on the last div, just for the left side, instead of the right side for the previous div?
Look at my code here http://jsfiddle.net/9gp6J/
div#contenuto_body{
margin: 0 0;
padding: 0 0;
float: left;
width: 80%;
height: 100%;
background-color: #C90;
-moz-box-shadow: 0 0 5px 1px #333;
-webkit-box-shadow: 0 0 5px 1px #333;
-ms-box-shadow: 0 0 5px 1px #333;
box-shadow: 0 0 5px 1px #333;
border-right: 4px solid #E6B800;
}
body{
margin: 0 0;
padding: 0 0;
}
div#ads{
margin: 0 0;
padding: 0 0;
width: 20%;
float: left;
height: 100%;
background-color: #CCC;
}
div#ads img{
width: 70%;
max-width: 200px;
display: block;
margin: 25% auto;
}
You could use the css3 feature calc(...) available in css3 depending on which browsers you are supporting this may suitable. Anything below IE9 doesn't support this so keep that in mind. Here's a fiddle:
http://jsfiddle.net/9gp6J/9/
Any other solution would have to involve negative margins such as:
div#contenuto_body{
...
margin-right: -4;
}
That should work anything IE7 and up.
for the border issue add a div inside the left div and give a right border to that inner div. This way the outer left div can remain 80% without the added 4px border problem.
HTML:
<div id="container">
<div id="left">
<div id="inner_left">
content left
</div>
</div>
<div id="right">
content right
</div>
</div>
CSS:
div#container {
height:200px;
}
div#left {
float:left;
width:80%;
height:100%;
background:red;
}
div#inner_left {
border-right:4px solid black;
height:100%;
}
div#right {
float:left;
width:20%;
height:100%;
background:green;
}
Check this jsfiddle
#controlpanel .button
{
margin: 12px 12px 0px 12px;
width: 100%;
}
How do I make these buttons fill the width of the white box, and yet have 12px on each side? Padding adds space internally... and margin makes them go off the white box.
add padding to #controlpanel
remove left and right margins from button
add box-sizing:border-box to buttons
and you should get smth like:
#controlpanel{
padding:0px 12px 12px 12px;
}
#controlpanel .button {
margin: 12px 0px 0px 0px;
width: 100%;
box-sizing:border-box;
-o-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
}
The problem is the width: 100%;.
Try to comment out that line and type: display: block;
Two things may help:
use padding for div#controlpanel
remove the margin for buttons
In addition you could also try to remove the 100% width.
I am Trying to Place My Footer in the bottom Right of the page. I am using the HTML5's <footer> tags.
So, here is what i have in my CSS:
footer {
position:absolute;
bottom: 0px;
float: right;
height: 35px;
margin: 0px 50px 0px 0px;
background: #9FF;
color: #000;
text-align: right;
padding: 10px 30px;
}
With this code the footer perfectly sticks to the bottom. What i want is that it should also be in the rightmost part of the footer as well.
http://i47.tinypic.com/2rrox0w.png
So, when i use the following code: right: 50px in the CSS. Then the footer gets positioned relative to the browser. So, whenever i Resize my browser the footer is dislocated.
What i Want ?
I want to footer to be placed at the bottom. And at a a margin of 50px(right) from the container(#main or #maincontent) it is placed in rather than the browser. The float: right does not seem to work.
I have looked the whole internet and stackoverflow as well. But, could not find a solution to this kind of issue.
I am using Google Chrome 22. So, My Browser is largely HTML5 compatible.
Updated: you don't need to position it absolute, just remove the position, give some width to your footer and float it towards right like this
footer {
float: right;
height: 35px;
margin: 0px 50px 0px 0px;
background: #9FF;
color: #000;
text-align: right;
padding: 10px 30px;
width: 180px;
}
My New Fiddle
Add position: relative to the container, and then use the right property.
So your full CSS would look something like this:
#main,
#maincontent {
position: relative;
}
footer {
position: absolute;
bottom: 0px;
right: 50px;
height: 35px;
margin: 0px 50px 0px 0px;
background: #9FF;
color: #000;
text-align: right;
padding: 10px 30px;
}
Remove float and give right:50px (or your desired value) to it. if it still doesnt work then give clear:both;and also check your padding and margin values.
You need to create a centralized container to the footer with the same with that #main or #maincontent. And then use the margin inside that footer container.
I have following problem:
I have div containing other elements and I try to make its width dependent from the content. I also restrict maximum width of this div. I use min-width and max-width in CSS, but it seems that min-width is not working. The width of div is always the max-width value, no matter what the content is.
Example:
I'd like to have the white div (that is main div, I was talking about) strictly around the form that is in it, without empty spaces on the left and right side. I gave the form style max-width:500px to show that even if content is small, the main div stays the same.
HTML
<div class="gInnerBox sInnerBoxMain">
<form style="max-width:500px; margin-left: auto; margin-right: auto">
<div id='content'>
<!-- CONTENT -->
</div>
</form>
</div>
CSS
.gInnerBox{
position: relative;
background-color: #fff;
opacity: 0.9;
padding: 10px 10px 10px 10px;
box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
-moz-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
-webkit-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
border: 1px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
.sInnerBoxMain{
max-width: 1000px;
min-width: 500px;
margin-left: auto;
margin-right: auto;
top: 50px;
}
(source: wstaw.org)
By default, a block-level element will expand to fill as much width as possible. So its width is basically "100%" (sort of) and you're saying a maximum of 1000px, so it's expanding to the maximum of 1000px. The minimum width is still being achieved (it's at least 500px). Try setting display: inline-block on the element and see if that helps you out any. This should make it only expand as far as its content while still paying attention to the minimum and maximum widths. You may have to add a breaker <br /> after to make the rest of your content adapts to it being inline.