I created this quick jsfiddle project to help you help me.
Why does margin-top for #container push the entire body downwards from html when I expect it to push #container from #containerWrapper ?
The idea is to have all the content inside container which would be placed with a margin right under the menu.
This is caused by margin-collapse which happens to two adjacent margins. The inner margin will collapse into the outer one and behaves like the one on the outer container block.
If you want to only apply margin on #containerWrapper, you could either use padding-top or put a border between #containerWrapper and its outer block container.
For that Purpose ,You may use padding-top
Related
I have a problem with margin-top and margin-bottom for some elements inside a floated div.
It's a column div floated to the right (I have also 2 other column divs floated to the left)
Demo here:
http://jsfiddle.net/zTb3g/
I need the "float" to adjust columns in the page, but the margin-top and margin-bottom don't work in some of the elements (ex: b, label, a), yet it works normally for other elements (ex: p, input).
I tried a lot of clearing styles in different places of the markup. Hope someone can help.
Thanks
You have to set display:block for the elements. Aside from that, when you have two elements placed one after the other, their margins will overlap. You might consider setting their paddings instead.
See this i think this is what you want http://jsfiddle.net/afshinprofe/zTb3g/1/
Here is a very simply jsFiddle to demonstrate my problem: http://jsfiddle.net/ryandlf/mSmUv/4/
When an element has a top padding or margin and it sits on the first line within a div, the div does not respect that padding or margin and push the element down. In most cases this isn't an issue, but for example, if I have a button that has a top border and padding the top of the border will be cut off because the div is not taking into consideration the padding value.
Is there a workaround for this other than just blindly setting margins or padding on every container div element and hoping I have added enough to account for any internal element that might be affected?
your link with class button is not a block element, it is inline element. Change this default behaviour by adding dispaly: block to it and it will work as expected. Proof available on jsfiddle.
So to sum up, the problem is not with the div - it is the problem with css - inline elements ignore margin and padding because they cannot 'reserve space'.
UPDATE: To answer your comment, here is the solution you might be looking for
The button element is inline. To get the desired behavior you can set display:inline-block.
Check here
Try to add following to the parent div:
overflow: hidden
I hope it helps!
Not a front-end UI but have a (probably) very easy problem to fix. Here is a jsfiddle of it: http://jsfiddle.net/trestles/U7mYT/ I have two floated elements shown in this screen shot. One is floated left and the other (index-right-content) is floated right. The floated right div has two columns of content. The second column is much longer but doesn't expand out the box to push down the container. The index-right-content is posistion:relative. The index-right-content is the blue dashed border.
thx
edit #1
fiddle of it: http://jsfiddle.net/trestles/U7mYT/
I think the issue is the 'index-box right' which is right floated needs some way to clear itself but adding a clear:both didn't seem to do it.
don't do this full-time so thx for any help
I don't know why you should use positioning for the div index-right-content. Also, the width is more than it should be... I think I see 640px for the width, which I think is unnecessary, provided that the widths of the columns inside this div is defined.
see the updated jsfiddle adding float to both inner columns in container.
I've a container div which has another div inside it. When I apply a margin to the inner div it appears to a margin-top to the container div (although it doesn't give a left margin)
http://belfastswimmingteacher.com/mockup.html
What's the craic?
You can either float the halfLeft div, or add padding-top to #content.
This is known as margin collapsing, and whilst may produce this unwanted behaviour, is in fact intended and correct.
I have an element in a div, which has a background image. Below the div I have another div with another background image. Now the problem is that if the last element contained in the first div has margin-bottom applied there will be a gap between the 2 divs like this:
Screenshot http://img40.imageshack.us/img40/5603/littlesnapperh.png
Notice the gray gap caused by the margin-bottom property of the h2 element contained within the first div. I know this can be solved if I switch margin-bottom to padding-bottom but what if I need margin-bottom?
How to fix this?
This is a feature known as collapsing margins. See: http://www.w3.org/TR/CSS2/box.html#collapsing-margins
The easiest way around (aside of replacing the margin with padding as you suggest) is to add a small (1px) invisible border or padding to the outer element.
Probably something to do with overflow:hidden or one of the elements not clearing properly. If add overflow:hidden to the first div it might fix it.