Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Cannnot make top margin work on this div

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #40779
    SalidaGuy
    Participant

    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

    #114208
    Paulie_D
    Member

    The float definitely need to be cleared but if all else fails just add some ‘margin-botton’ to the sidebar.

    #114215
    Senff
    Participant

    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

    #114241
    wolfcry911
    Participant

    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.

    #114252
    Senff
    Participant

    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. ;)

    #114255
    wolfcry911
    Participant

    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).

    #114256
    Senff
    Participant

    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).

    #114285
    Paulie_D
    Member

    Ditto, it’s just automatic for me to clear floats one I’ve stopped using them…oops! :)

    #114301
    redhornet
    Participant

    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.

    #114376
    SalidaGuy
    Participant

    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.

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.