- This topic is empty.
-
AuthorPosts
-
November 13, 2012 at 11:35 am #40779SalidaGuyParticipant
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.
mark
November 13, 2012 at 12:04 pm #114208Paulie_DMemberThe float definitely need to be cleared but if all else fails just add some ‘margin-botton’ to the sidebar.
November 13, 2012 at 12:47 pm #114215SenffParticipantThe 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
November 13, 2012 at 5:19 pm #114241wolfcry911ParticipantThat’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.
November 13, 2012 at 7:08 pm #114252SenffParticipantYou’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. ;)
November 13, 2012 at 7:12 pm #114255wolfcry911ParticipantBut 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).
November 13, 2012 at 7:31 pm #114256SenffParticipantOk, 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).
November 14, 2012 at 4:49 am #114285Paulie_DMemberDitto, it’s just automatic for me to clear floats one I’ve stopped using them…oops! :)
November 14, 2012 at 10:08 am #114301redhornetParticipantUse 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.November 14, 2012 at 5:11 pm #114376SalidaGuyParticipantAdding 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.