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.
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'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.
I have an image with css "float" set to "left", inside a "div" element. Even though the position is relative, the image does not force the height of the div to increase, and thus the image sticks out over the bottom of the div. How can I fix this?
Set the overflow property for div to hidden or auto.
See http://www.quirksmode.org/css/clearing.html
I have a div that must be set to overflow:hidden, and I want one of its child divs to scroll through content; however, no matter how I play with the overflow on the child, it won't scroll. How can I override the inheritance?
You likely have not specified a height on the inner div.
Without height on the div its height will be the height of its content and hence it will never need to scroll. Of course with it being contained in an outer div that does have height and overflow:hidden its content disappears under the border of the outer div.