CSS: margin on a wrapping element does not push the floated element

#1

I have created a pen here : source code . This page is a basic two-column layout: a very simple page, with some text formatted on a white background

The left column with class=“announcement” is having a right margin of 600px and the right column with class=“main” is floated right. I was expecting that the right margin on the left column would push the right column. However, it does not seem to do so. Instead, the right column just seamlessly appear on top of the margin of the left column.

What is it that I am missing ?

#2

Hi there, great question! Check out stuff about the box model (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) which should help explain how margins work.

That said, it doesn’t cover floats, this article might help: https://css-tricks.com/all-about-floats/

Basically, when you floated the right column, it is basically “floating” above the elements and won’t be affected by margins (if I recall correctly). You might notice that you can remove the margin from .announcement and everything still stays in two columns.

I hope that helps! The box model is definitely mysterious until you get used to it.