The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Even with margin and padding set, no space between left column divs

  • # November 24, 2012 at 12:01 pm

    Hello i’m sure its simple but I cannot figure it out. I want to get spacing between my reel div and about div (left column div is the main div)

    # November 24, 2012 at 12:53 pm

    Instead of a top margin on the about div, put a bottom margin on the reel div. The reason is that because #reel is a float, its taken out of the document flow; #about’s margin is ‘lost’ beneath the #reel div (a margin larger than #reel’s height would show this). However, a float’s margin will push other elements.

    # November 24, 2012 at 8:20 pm

    k thanks, that makes sense. The bottom margin does work, with the text about. The problem is that when i place a border around about div, there is no spacing between the divs???

    # November 24, 2012 at 10:25 pm

    Again, because #reel is a float, it’s removed from the document flow and #about’s box actually begins at the top of #reel (the float only displaces inline content).

    So, is there a reason #reel is a float to begin with? If not, you could remove and the margin and border will work to your liking. Or, you could make #about a float as well and the margin and border would work between them, but may cause problems below #about.

    # November 24, 2012 at 10:54 pm

    that did it!!! I removed the float. I taught myself css, and have very limited knowledge, so i figured i had to always use float when having items side by side. Thank you so much!!!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed