i've created a CSS Desk example to help with my question.
I have an outer div, .mainPage and it has a child div, .content. When I set .content's top margin to any size, .mainPage moves with the content.
I don't want that to happen, I want .mainPage div to stay at the top above the header, and the content to start 160px down, which is below the header.
The header is fixed so that only the content moves, to give the really nice effect of the background.
If you change margin-top on the content element to padding-top, the background on .main Page will go below the header. Is that the effect you are going for?
Also, just to note, you don't have a position of relative, absolute or fixed set on .mainPage, so z-index won't work.
Related
I have a div (banner) with fixed position and a div (content) .When I scroll down the div (content), it will overlap with the div (banner) and caused some wording in div (banner) not able to see. I have tried to put z-index on both div but still have same result. Please see my code at Jsfiddle.
Jsfiddle:https://jsfiddle.net/ckcheah/731sLxks/
you can add background-color to your banner.
like this:background-color: #fff;
actually, you can set your banner top:0 to fixed it in the top of the frame.
I've got two divs, the left one holds my content, the right one holds an ad. They're both set to inline-block, and they're in a wrapper div with text-align: center set to keep them centered. This way in the event that the ad div is blocked, the content div is centered correctly on its own.
The problem occurs once I use margin/padding to put a gap in between the divs. I need this so that my ad isn't 1px away from my content. But this padding is retained when the ad is blocked, which means that the main content div is shifted to the left by half this padding amount.
I've tried padding-left and margin-left in the right div, and padding-right and margin-right in the left div. It looks like adblock is setting the div width and height to 0 to hide it, so the padding remains.
All help greatly appreciated!
You should the margin/padding you want on the ad itself (I am guessing an img) rather than its enclosing div container. This is because AdBlock will remove the img (but not its parent div) from the DOM, taking its styles along with it.
I have a question about margin in CSS. I have a DIV element, which has an image for background. Inside that DIV I have another DIV. I want this DIV inside to be 200px from the top. But, when I do that, the outside DIV also moves down for 200px. Why is that and how to keep the outside DIV on top?
Set padding-top on your outside div.
For an detailed explanation to your problem see here.
I have tried a dozen different solutions and nothing seems to work.
http://betelec.ergonomiq.net/societe/offres-d-emploi
On the page above, I want the teal background of the left sidenav to extend to the height of the white container around it.
The white container gets its height defined by the height of the largest child div (in this case, the mainbody).
I have tried setting the sidenav's div height to auto, but the div remains fixed height. If I set the div to a very large number like 10000px and have overflow hidden, nothing gets hidden.
I am completely at a loss.
Set parent element to position: relative; and then the child element to position: absolute; height: 100%;
Live example.
http://jsfiddle.net/pQdAr/
It looks like your left sidebar is positioned by float:left.
The following post may help you. How to match height of floating sibling divs
Here is my jsFiddle for the following question: http://jsfiddle.net/arelia/Rruxf/
I'd like to have a header that stays at the very top of the body and a footer that stays at the very bottom of the body. I have a content div (position: relative) between the header and footer, and when I set a margin around the div my absolutely positioned header and footer move from their top/bottom positions by the height of that margin (this also happened when I tried setting a margin above and below the paragraphs in the div). In the fiddle you can see that the footer is not attached to the bottom even though it's absolutely positioned (I went ahead and made the header static since static gives the intended result). How do I position the header and footer to the top and bottom of the body and not have the content in the middle move those two elements? If the position: absolute elements are moved out of the flow why would anything affect their position at all?
I've tried searching here and Google for "CSS margin affects absolute" and a few other phrases to no avail. I discovered this while playing around with it some more in developer tools:
Metrics show the body is the height of the html element minus the amount of one margin (the margin that's still affecting the footer). So, the body must be stretching to the height of the content div since there is nothing else within the document flow within the body to define its height. But that height ends where the content ends instead of after the margin. Shouldn't it include the margin?
If I make the height of the body 100%, the footer positions
itself to the bottom of the viewport and then stays fixed in that
spot when I scroll. Why isn't it attaching itself to the bottom of
the body instead of the bottom of the viewport?
Answer to Your Two Last Questions
"But that height [of the body] ends where the content ends instead of after the margin. Shouldn't it include the margin?" Answer: No, the body height itself is unaffected by the bottom margin of an element within it.
"If I make the height of the body 100% ... Why isn't it attaching itself to the bottom of the body instead of the bottom of the viewport?" Answer: It is attaching to the bottom of the body because by setting height to 100% you have set the body to the viewport height.
Answer to Your Main Questions in Reverse Order
"If the position: absolute elements are moved out of the flow why would anything affect their position at all?" Answer: What affects their position is the position of that body element. In taking the answer to the first question above, that margin on an inner element can cause the element within the the body to keep off the bottom of the viewport, and thus cause the body itself to gap from the bottom of the viewport by that distance. Then, when you position an element to the body, it will be gapped because the body is not flush to the bottom of the viewport. This is what you are seeing in the footer area of your fiddle.
"How do I position the header and footer to the top and bottom of the body and not have the content in the middle move those two elements?" Answer: Adam's original answer of fixed is one method, based strictly off your bolded question (he has since modified it). However, you clarified in a comment that you really want is "If the content is short I want the footer at the bottom of the viewport. If the content is long I want it to follow the content and touch the bottom left and right corners of the page." Adam's original answer of fixed positioning will not accomplish that (as he also realized). Rather:
Do This
html {height: 100%}
body {min-height: 100%;}
div {
margin: 20px 20px 0 20px; /* eliminate your bottom margin */
padding-bottom: 50px; /* use bottom padding to get space for footer */
}
See short content fiddle.
See long content fiddle.
Looking at your commment I think I understand what you're trying to achieve. You can use this:
http://ryanfait.com/sticky-footer/
Here is how you could integrate it with your existing code:
http://jsfiddle.net/wJSZD/