I am working my way through my first responsive design from scratch. It seems to be working well. Except I have some issue with my divs that is not correct. On this page"
The gray testimonial box above the footer has a problem. I cannot add top margin. Using firebug, I can select the testimonial div, and increase the 10px top and bottom margin, but the top margin will not grow.
Any suggestions for where I am going wrong would be appreciated.
The sidebar had a bottom margin of 0 and the testimonials has a top margin of 10. The result (the space between those two) will be the lowest of the two, because the testimonials is not floated. That's normal behavior between two elements of which at least one is not floated: http://codepen.io/senff/pen/KdLlh
That's not quite right Senff. The 'problem' is that both the #content and #sidebar are floating are taken out of the document flow. The nearest in flow element that #testimonial's margin can 'push' off of is #grid's top edge (because it has overflow: hidden; changing its block formatting context, otherwise it would be #header). If you were to give #testimonial a top margin larger than either float (starting around 520px depending on font size) you would see it start to move down.
So, the in flow elements can't push off of a float, however a float can push other elements with their margins. So the easiest fix is to put a bottom margin on the two floats (use both in case one is longer than the other) equal to the spacing you wanted with the top margin on #testimonial.
You're right @wolfcry911, that is indeed the root cause of the problem. However, I stand by my words as the "result" of the problem (or the problem itself), and also by @Paulie_D's solution. ;)
But the result, in your words, is incorrect. If a large margin is put on #testimonial (say 550px) then, by your reasoning, the lesser of the two, the bottom margin of zero, should win out. It doesn't.
What's more, is the fact that the floats don't even need to be cleared (as Paulie_D states is needed). The bottom margin on the floats is the key to the whole solution.
Another solution, not mentioned previously, would be to float the #testimonial. Its top margin when then push against the longer of the floats above (but would need a left margin of 10% to center it).
Ok, yup, you're right. I see it now. Academic approach of this problem, makes more sense.
The solution to float the #testimonial was not mentioned by me because then it wouldn't be truly centered (just pushed somewhat to the right, which is not the same).
Use padding instead. Or you can set margin-bottom on .sidebar and .content.
That way the height-est element will push down your container.
Both .sidebar and .content are floating elements and somehow you cant use margin-top against them. Notice if you set float:none on them the margin-top will work.
I am working my way through my first responsive design from scratch. It seems to be working well. Except I have some issue with my divs that is not correct. On this page"
bighornpark.com
The gray testimonial box above the footer has a problem. I cannot add top margin. Using firebug, I can select the testimonial div, and increase the 10px top and bottom margin, but the top margin will not grow.
Any suggestions for where I am going wrong would be appreciated.
mark
I feel that the fact you are using floats will be your issue. Use clearfix on the sidebar class. That hopefully fixes it
clearfix
The float definitely need to be cleared but if all else fails just add some 'margin-botton' to the sidebar.
The sidebar had a bottom margin of 0 and the testimonials has a top margin of 10. The result (the space between those two) will be the lowest of the two, because the testimonials is not floated. That's normal behavior between two elements of which at least one is not floated: http://codepen.io/senff/pen/KdLlh
That's not quite right Senff. The 'problem' is that both the #content and #sidebar are floating are taken out of the document flow. The nearest in flow element that #testimonial's margin can 'push' off of is #grid's top edge (because it has overflow: hidden; changing its block formatting context, otherwise it would be #header). If you were to give #testimonial a top margin larger than either float (starting around 520px depending on font size) you would see it start to move down.
So, the in flow elements can't push off of a float, however a float can push other elements with their margins. So the easiest fix is to put a bottom margin on the two floats (use both in case one is longer than the other) equal to the spacing you wanted with the top margin on #testimonial.
You're right @wolfcry911, that is indeed the root cause of the problem. However, I stand by my words as the "result" of the problem (or the problem itself), and also by @Paulie_D's solution. ;)
But the result, in your words, is incorrect. If a large margin is put on #testimonial (say 550px) then, by your reasoning, the lesser of the two, the bottom margin of zero, should win out. It doesn't.
What's more, is the fact that the floats don't even need to be cleared (as Paulie_D states is needed). The bottom margin on the floats is the key to the whole solution.
Another solution, not mentioned previously, would be to float the #testimonial. Its top margin when then push against the longer of the floats above (but would need a left margin of 10% to center it).
Ok, yup, you're right. I see it now. Academic approach of this problem, makes more sense.
The solution to float the #testimonial was not mentioned by me because then it wouldn't be truly centered (just pushed somewhat to the right, which is not the same).
Ditto, it's just automatic for me to clear floats one I've stopped using them...oops! :)
Use padding instead. Or you can set margin-bottom on .sidebar and .content. That way the height-est element will push down your container. Both .sidebar and .content are floating elements and somehow you cant use margin-top against them. Notice if you set float:none on them the margin-top will work.
Adding margin to the bottom of content and sidebar did the trick. Thanks for the help and discussion. I even learned a bit about floats and clearing.