The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › How can I make margins collapsed if I floated the elements?
https://codepen.io/Ayalann/pen/LLoJZO
It seems if I don’t float the elements the margins collapse, but I need to float them left, because I want them in one line.
But if there are margins they don’t collapse, therefore can’t be the three blocks in one line.
How can I solve it?
Your widths aren’t logical since they don’t account for the margins.
width:33% means 33% of ALL the parent width…not 33% of the remaining width.
width:33%
Accordingly, you have to account for the margins in your width calculations.
Perhaps width: calc(33.33% - 2em);
width: calc(33.33% - 2em);
https://codepen.io/Paulie-D/pen/jwjBbj
Alternatively, use flexbox
https://codepen.io/Paulie-D/pen/PjrpZd
Thank you for your answer!