I’ve been trying to practice my coding on Codepen and for some reason my divs keep overlapping and I don’t know why.
This has never happened before… Please explain to me why my footer div is overlapping my main content div… Is it something to do with the display: inline-block; property? If so, how do I align my elements in the way I have without having to worry about this overlap?
I don’t see anything overlapping, can you show us what it is you are seeing?
I removed the float: left; from the .cellTab selector which fixed the overlap (I have replaced it so you can see the problem). However, now when I input any kind of text into one of the red boxes, be it a heading or a paragraph, the box seems to move down out of position. Any idea how to fix this?
The problem is occuring here: http://codepen.io/CobiHopkins/pen/bBGdZw
Same code in this link just with some extra.
That’s because floated elements don’t create any space in their containers, so need to be cleared if there is not enough un-floated content to create sufficient height to contain the floated elements.
Google the “clearfix hack”.
In reality, it best to use floats in layout sparingly, just when appropriate. There are better ways to create layouts now.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
