Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Ivan Kozhunkov
PLUS
Ivan Kozhunkov
Courses Plus Student 8,480 Points
Posted by Ivan Kozhunkov
Ivan Kozhunkov
Courses Plus Student 8,480 Points

I have a problem with margins.

My code for this challenge:

.clearfix::after { content: ""; display: table; clear: both; }

.primary { width: 60%; float: right; margin-left: 5px; }

.secondary { width: 40%; float: left; }

.col { vertical-align: top; }

If I attempt to add some margins between 2 columns, like .primary {margin-left: 5px} my primary class column goes to another line

Simon Duchaine
Simon Duchaine
14,441 Points
Simon Duchaine
Simon Duchaine
14,441 Points

I think it's because .primary and .secondary are taking up 100% of their parent. If you change the width of primary to something like 55%, that'll give place for your margin.

1 Answer

Angyal István
Angyal István
11,259 Points

In that case You can use the calc function to calculate the width exactly. The problem is that: you have got 100% width plus 5px, so it can be in one line.

The slove:

.primary { width: calc(60% - 5px); //here we use the calc calc(value operator value); float: right; margin-left: 5px; }

.secondary { width: 40%; float: left; }

so now, the primary width is 60% - 5px and the 5px margin, and the secondary 40% is now equal 100%

I hope it helps You!