I try to center a div element ( the footer div in this case ) in my webpage but it insists on staying on the left side.
I am not quite sure what is wrong... Any ideas?
Thank you in advance.
HTML :
<div id='main'>
</div>
<div id='footer'>Centered Text</div>
CSS :
* {
padding: 0;
margin: 0;
font-size: 12px;
}
body {
font-family: helvetica, serif;
font-size: 12px;
overflow-y:scroll;
}
#main {
border: 1px solid #bbbbbb;
margin: 3% 5%;
padding: 10px 10px;
}
#footer {
font-size: 75%;
margin: 0px auto;
position: absolute;
bottom: 0px;
}
http://jsfiddle.net/DjPjj/2/
http://jsfiddle.net/DjPjj/13/
Try this:
#footer {
font-size: 75%;
width: 100%;
position: absolute;
bottom: 0px;
text-align: center;
}
Because your footer is absolutely positioned, you must tell it what width to take relative to its parent container. You can then use text-align to center the text within it.
Here is another example: http://jsfiddle.net/DjPjj/17/
This one centers a box within the absolutely positioned element. The inner box can be centered using margin: 0 auto because it is not absolutely positioned.
#footer {
font-size: 75%;
width: 100%;
position: absolute;
bottom: 0px;
}
#footerInner {
margin: 0 auto;
width: 300px;
background-color: #ddd;
text-align: center;
}
This is more flexible because the inner element gives you a new container to work with that is centered relative to the parent.
The reason it won't center is because of the positon: absolute;.
Keep in mind this means that the footer will always be at the bottom of the page, even if the content overflows past it. It will overlap. If you want to have it be attached to the bottom of the page, you must set the min-height of a container above it to 100% and then deal with a negative margin-top and remove the position: abosolute;
http://jsfiddle.net/4fuk7/1/
Notice how the centered text is overwritten.
If you are looking for something to always be at the bottom, this would work
http://jsfiddle.net/4fuk7/3/
Sorry, the last one would scroll to the top. This one doesn't, but you'd need to fiddle with it a bit to get it to properly align around the margin's you've set. http://jsfiddle.net/4fuk7/9/
http://www.tlunter.com/Layout 2/ is where I did something similar. You can reference that if you want.
Related
I have a container and inside I have a div I wanted to stick to the left corner of the screen, but I always have a gap
How do I obtain something like this? Thanks in advance
https://onedrive.live.com/redir?resid=22090721B1B171B7!12771&authkey=!AEDRyX0320pmcLk&v=3&ithint=photo%2cjpg
i hope to help with this example https://jsfiddle.net/step/L9rn4fkg/ you play with margin-top
.sticky {
width:100px;
height:100px;
float: left;
position: fixed;
background-color: #30cff0;
margin-top:50px;
z-index:1000;
}
The most basic way to reach this is:
html, body {
margin: 0;
padding: 0;
}
And make sure your div doesn't have any margin or padding on the left side either (for instance, when you use bootstrap's class="container" it will give you a left and right padding of 15px.
I think you should reset your body(or your elements parent of you want stick) margin.
you can use:
* { /* it's a hard method */
margin: 0;
padding: 0;
}
.fix-el {
position: fixed;
width: 100px;
height: 100px;
/* center it */
line-height: 100px;
border: 1px solid #EEE;
top: 50%;
margin-top: -50px;
text-align: center;
}
<div class="fix-el">
fix this
</div>
hope you can solve it
I often have this problem with a lot of fixed navbars i.e. when I have a fixed navbar, how do I give the element below it some margin, so that the fixed navbar is not covering that element?
I was just wondering if there is a more elegant way of doing this apart from the <br> tag and margin-top.
The sample code would be like:
HTML code :
<nav>
I AM NAVBAR
</nav>
<br><br>
<div>
</div>
CSS code :
* {
padding: 0;
margin: 0;
}
nav {
height: 50px;
width: 100%;
background: #444;
color: #fff;
text-align: center;
font-weight: bold;
font-family: verdana;
position: fixed;
top: 0;
left: 0;
}
div {
height: 500px;
width: 100%;
background: tomato;
}
Fiddle here.
Fixed position relatives to the screen's viewport. You can just set top margin or padding on the body tag, and make the value >= the navbar height.
body {
margin-top: 50px; /*or padding*/
}
http://jsfiddle.net/5k5mxcn1/1/
There's a theory in CSS that you only apply bottom margins.
http://csswizardry.com/2012/06/single-direction-margin-declarations/
So to keep things modular, you could create a wrapping class:
<nav class="nav__wrapper">
<div class="nav__content">
Navigation
</div>
</nav>
<p>Text content</p>
css:
.nav__wrapper {
height: 30px;
margin-bottom: 10px // breathing room
}
.nav__content {
background: #dadada;
height: 30px;
line-height: 30px;
position: fixed;
width: 100%;
}
fiddle: http://jsfiddle.net/wv53qLwz/
A fixed element is position relative to the viewport, meaning it stays at the same designate spot and does not leave a gap in the page where it would normally have been located.
You can apply a top margin to the element that is directly following the fixed element.
div {
margin-top: 50px;
}
However, I've found out that using the scroll-margin property does the trick. It's explained better here https://css-tricks.com/almanac/properties/s/scroll-margin/#aa-enter-scroll-margin
div {
scroll-margin-top: 50px;
}
I have an image in my website that is defined with the following CSS:
#settings_big{
border: none !important;
margin: auto 0 0 0 !important;
padding: 0 !important;
float: right;
}
Because of the float the image obviously sits on the right side of the content. The top margin causes the image to sit right beneath the lowest hanging element in the content. This looks OK, but I would really prefer that the image sit as low as possible in the browser window to somewhat frame the content. I've seen multiple examples that use fixed positioning to achieve this, and this would work, however my content has a max and min width of 960px; using a fixed position of
bottom: 0;
right: 0;
causes the image to get pushed far right outside of the content to the edge of the browser window. Is it possible to push the image to the bottom of the browser window while keeping the
float: right;
positioning? I would rather not use JavaScript or jQuery but it is an option I suppose. Thanks in advance.
New answer:
<div class="container contentCont">
<div id="content"></div>
</div>
<div class="container imageCont">
<div id="image"></div>
</div>
With CSS:
.container {
width: 200px;
margin: 0 auto;
background: #ccc;
}
.contentCont {
min-height: 600px;
}
.imageCont {
position: fixed;
bottom: 0;
right: 0;
left: 0;
}
#image {
float: right;
width: 20px;
height: 20px;
border: 4px solid red;
}
Does it right as in this JSFiddle: http://jsfiddle.net/WYX7H/1/
The following might be close to what you need.
Assuming that your page layout vaguely looks like the following HTML:
<div class="wrapper">
<p>some words...</p>
<div class="slot">
<img src="http://placehold.it/200x200">
</div>
</div>
apply the following CSS:
.wrapper {
width: 600px;
height: 600px; /* for demo only, not critical... */
margin: 0 auto;
border: 1px solid blue;
}
.slot {
text-align: right;
position: fixed;
left: 50%;
bottom: 0;
margin-left: -301px;
width: 600px;
border: 1px dotted blue;
}
.wrapper img {
vertical-align: top;
}
See demo at: http://jsfiddle.net/audetwebdesign/6Xnxj/
If you don't know the width of the image (or you don't want to specify it),
create a wrapper that matches the width of the parent element and apply position: fixed to it.
The image can then be either floated or text-aligned to the right within the fixed block.
The fixed block can then be positioned to the left and bottom, and using margin-left
to keep it centered.
Click here for visual
As you can see from the picture, my parent container is not expanding to fit my child container. The page container (#contain) actually stops at the bottom left hand corner of the kitchen photograph. The child container (#zone2) is clearly overflowing outside its parent container (#contain). I would like to be able to have (#contain) expand automatically to fit (#zone2). The CSS is:
#contain {
position: relative;
width: 100%;
margin: 0 px;
background: #E3DCCC;
z-index: 0;
}
#zone1 {
width: 100%;
height: 850px;
background: url(http://waly1039.com/sites/default/files/k4.jpg) no-repeat center top;
position: absolute;
z-index: -1;
}
#head {
position: absolute;
top: 20px;
width: 100%;
height: 330px;
}
#head img {
max-width: auto;
height: auto;
}
#zone2 {
position: relative;
overflow: hidden;
padding: 3px;
top: 360px;
float: right;
right: 15px;
width: 53%;
height: auto;
border: 4px solid #715E40;
background-color: white;
}
#zone2 img {
max-width:100%;
height: auto;
float:left;
margin: 5px;
}
#zone3 {
position: relative;
top: 710px;
left: 15px;
float: left;
height: 340px;
width: 38%;
border: 4px solid #715E40;
background-color: white;
}
This is a float issue. Try adding the traditional CSS clear fix to #zone2's container:
.container:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Be sure to put this in the :after pseudo selector, otherwise it won't work for you. Floated elements exist outside of normal document flow, which is why the container isn't expanding to contain them. The clear fix forces the floats to be cleared, which will cause the container to expand around the bottom of this element.
I tested adding more images to #zone2 and #contain expands vertically. Somehow you've got an element(s) in #zone2 with padding or margins that aren't being added to the parent's total height.
If you want a quick fix in order to move on then add margin-bottom: 30px; to #zone2.
I've duplicated your problem and was able to resolve it with this: You might want to try it. It's looks a bit odd so make a class for it if you like. I'm more concern with where it is placed.
Just beneath lines of your code, add my third line. Just that and you are done. Note, it more about positioning.
<div id="zone3"></div>
<div id="zoneclear"></div>
<br style="clear:both; float:none; display:block; height:1px;" />
Just add the third line.
and just modify one of your styles:
#zoneclear {
clear: both;
float:none;
display:block;
height: 30px;
position: relative;
}
[EDIT]
The codes have a serious bug in firefox which is not present in Google Chrome (that I tested in earlier due to your relative positioning. So I've modified the #zoneclear style to fix that. You might have to test if the other browsers like this hack.
I hope it helps you
Hi I have a css issue as I am trying to stick a footer to the bottom of the page but it only sticks it as far down as the viewport goes and not the bottom of the document.
Can somebody help me understand why this is please?
My css and html is pretty simple although after reading lots of examples and trying things out I still cant get this to work. I dont want my footer inside the wrapper, rather outside of it and I also dont want to set height:100% on the wrapper.
My html looks like below:
<div class="wrapper">
... some content
</div>
<div class="footer">
</div>
And my css:
html {
height: 100%;
margin: 0;
padding: 0;
position:relative;
}
body {
position:relative;
height: 100%;
background-color: #D8D8D8;
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Verdana, tahoma, arial, serif;
font-size: 12pt;
}
.wrapper {
position:relative;
margin-left: auto;
margin-right: auto;
width: 1024px;
padding: 6px;
margin-bottom: 30px;
}
.footer {
position: absolute;
bottom:0;
left: 50%;
margin-left: -512px;
height: 25px;
background-color: #E6E6E6;
width: 1024px;
padding: 6px;
clear:both;
}
is it possible to do this with the footer outside of the wrapper?
I thought that setting position absolute on the footer would mean it would be positioned based on the body or html as they are the next elements up with a position:relative but bottom:0 seems to just be the bottom of the viewport even though the wrapper div extends far past this with lots of content.
The consequence of this is that when there is a lot of content within the wrapper the footer actually sticks mid way up the page as bottom is calculated as the bottom of the viewport.
Thanks
Positioning need not be used all the time. The attribute is meant only for certain cases to specially "position" content.
I think removing
position: absolute;
from
.footer
should solve the problem.