I have this page where all the div’s seem to work and then all of the sudden my last one breaks. I have two divs in my CSS, one being centeredRight and one centeredLeft. They are lined up down the page. But my last div on the left seems to get pushed to the right.
Here is my CSS.
And here is my HTML.
TLDR - ctrl f for “Contactmerands” and please explain to me why this box is getting pushed to the bottom RIGHT of the large golf towel box. It should appear under the large golf towel box just like the rest of the divs.
If you would like to see what I mean you can go to my school web portal where I have the page posted HERE.
When an element is floated, it is essentially removed from the flow of the document. Thus, when a parent element’s children are all floated, the parent collapses upon itself as it doesn’t have any defined dimensions.
To solve this, you could set either overflow:hidden or overflow:auto on the parent elements. This essentially forces it to contain the children elements, therefore preventing it from collapsing.
Add the following CSS and your problem is solved:
Sometimes changing the overflow property will conflict with existing CSS. You could alternatively use the pseudo element clearfix: