For a division to place at the top or somewhere in the window we will give some relative margin for it. Is there any way to set the div at the bottom, like just above the footer? I will give explanation for my question:
I have a footer.
I have a div with height = 200px
I have another div with height = 400px
Now I want to place them in the window, such that they should look like, they are placed on the footer. How can I do that? Thank you
Your main content should be something like this:
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -40em; /* The -40em should be adjusted to your page, just play around with it */
}
Then goes your div heitgh200, div height400 and footer.
Here is a full working example:
http://jsfiddle.net/bn72w/1/
Here is a good tutorial on sticky footers: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Related
I am trying to make some responsive cards. I have the cards completed and spaced out properly. On the front of the cards I want an image on the top of the cards and a title in the middle. The title is fine and the image is fine except for the right side of the image.
Here is the CSS code for the image (image is in an img tag in HTML page with a class of "image"):
div .image {
padding: 5%;
height: 45%;
width: 100%;
}
The right side for some reason is ignoring the padding and sticking out of the card parent div. Any ideas why?
did you already set div's width?
also as far i know is no need to set image's height if you already set it's width to 100%
anyway here some example
div { width: 200px; height: 150px; padding: 6px; }
div img { width: 100%; }
You set the width to be 100% and padding 5%. Make sure you have:
box-sizing: border-box;
for the parent.
Also without the full example of code, hard to answer. Can use overflow: hidden; on the parent to hide that part sticking out.
My question is almost identical to part of this question, yet it did not lead me to a solution. How do I center my page while making my header take the full width of the browser window?
Using the following css snippet my page is perfectly centered in the viewport as the browser window changes size, however I want the header image to remain in the same position, flush against the left hand side of the viewport, no matter what the viewport window width is.
#page{
margin-left: auto;
margin-right: auto;
width: 1024px;
}
#header {width: 1200px;
}
put your #header outside your #page and set margin-left and margin-right to auto
I working on a page with a footer. The footer's positioning is like it should, but I have an problem when i resize the browser from bottom to top. For details, you can see the image below :
Here it's my css footer code :
.footer_page {
color: #fff;
text-align: center;
bottom: 30px;
width:100%;
position:absolute;
}
Someone have an suggestions ?
Thanks.
The bottom 30px signifies bottom of the window. Calculate the distance from top you need your footer to have and give
top:500px
A better way is to give a large div id="page" around your entire page with required height, say 1000 px, and then footer with bottom 30px.
#page{position:absolute;height:1000px}
#page #footer{position:absolute;bottom:30px}
If this seems too much or height of page is variable, let footer be part of flow of the document.In such cases it is better not to use absolute positioning.
You can also do this with some javascript magic.
What I am saying is, suppose total height of your page is 1000px. Put a wrapper around entire page with id page, give absolute positioning and height 1000px, then put footer in the end.
If you mean that the footer doesn't stay fixed to the bottom, try
.footer_page, .push {
clear: both;
color: #fff;
text-align: center;
bottom: 30px;
width:100%;
position:absolute;
}
so adding .push and clear:both.
I've tried so many things on this page
https://boycottplus.org/campaign/reclaim-our-time-say-no-time-wasting-websites
On the right column, I can't get a padding or margin of 10px between it and the left column without a scroll bar appearing. I've tried using a wrapper div but everything I do seems to bring the scroll bar :-/
The style I am focusing on
.subsection .inner {
padding-left: 10px;
}
in firefox
Add overflow:hidden to your body style.
Are you setting width and padding on the same element?
For example, if you have:
.subsection .inner {
width: 100%;
padding-left: 10px;
}
then the total width of the inner div will be 100% + 10px, which will result in a scroll bar.
If you want to remove scrollbar in horizontal direction, then use overflow-x: hidden; in that particular HTML element, keeping your vertical scrollbar intact.
I am trying to make a pinned down style menu like this:
http://www.w3.org/Style/Examples/007/menus
Except I want the horizontal positioning to be more flexible.
I know that I can do that having a percentage value in "right:" instead of a constant, but i want the menu to fit snugly in a centered blog layout as the sidebar, which means when the page is resized, the sidebar shouldn't cover the content. Similarly, the box shouldn't spread away from the content if i make the page bigger.
Any way to do this with only css? If not, perhaps an easy javascript solution?
Here's one way to do this with some generic code:
HTML:
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
CSS:
Set an explicit width on the container and the content, leaving room for the sidebar in the container. Horizontally center the container.
#container {
width: 200px;
margin: 0 auto;
}
#content {
width: 150px;
}
Now we're going to position: fix the sidebar relative to the center of the page instead of relative to the right edge of the page. Make it the width of the left over space in the container and give it a margin-left (or padding-left, depending on other things you may want to do with it) equal to the width of the content. Then set right: 50% (for a right sidebar, switch these values to left for left sidebar) and margin-right to negative one half the container width:
#sidebar {
width: 50px;
margin-left: 150px;
position: fixed;
right: 50%;
margin-right: -100px;
/* other styles such as "top", etc. */
}
Resize the window and it stays snug to the content and vertically positioned wherever you place it.
Here's a fiddle (with some extra styles for visual clarity): http://jsfiddle.net/blineberry/UkEkS/