CSS CSS Layout Basics Page Layout with the Float Property The Float Challenge Solution

Wayne Collier
Wayne Collier
6,220 Points

Why does this work but not this?

Why does this work: .col { float: right; padding-left: 1em; padding-right: 1em; } .primary { width: 65%; } .secondary { width: 35%; }

But this doesn't: .primary col { float: right; padding-left: 1em; padding-right: 1em; width: 65%; }

.secondary col { float: right; padding-left: 1em; padding-right: 1em; width: 35%; }

1 Answer

It doesn't work because 65% + 35% + 2em is more than 100%. Use the calc function and instead of 65% write calc(65% - 1em) and instead of 35% write calc(35% - 1em)

Hope this helps