I'm having a really hard time with some CSS. I've been given a PSD in an assignment. I know what the document should look like, but I'm getting this instead.
Can you help me with this? Here is my code!
Based on your code, it appears that what you need help with the box-model!
CSS is one of the least intuitive aspects of web development (in my humble opinion). The box-model, and it’s relationship with parents and children and siblings is sometimes way too confusing. But people have spent years working with it and come up with some pretty clever solutions that frankly, you kinda just have to memorize.
You have two main issues. The section tag with class=“pricing” is simply as tall as its padding. If it had a direct child(ren) with some height, it would expand downwards to contain them. You have a direct child, a div tag with class=“pricing-tiers”, but that div has height=0. Now what about what I just said, that if it had children with non-zero height it would expand to include them? The pricing-tiers div has three children that are all visibly non-zero in height. What gives?
Looking at those children, the class=“tiers” divs, they have one property that essentially nullifies that parent-child relationship: the float property. The way to think of float is that while a div with the float property is “chained” to it’s parent’s location on the page, like an anchor, it no longer causes the parent to expand to the float’s parent’s size. I’m sure there are reasons for this, but I don not understand them well.
There are a couple ways to address this. You either need to clear the floats by giving them an empty sibling div that simply has the property clear: both. Or to write what is called a clearfix into your CSS file and then apply that your HTML. The clearfix will be a class that you’ll give to a parent div to expand and contain floated children.
.clearfix:after { content: ""; display: table; clear: both; }
And then you include “clearfix” in the class property for the pricing tiers div. It’s a little hacky, but it’s commonly accepted solution. Now, the class=“pricing-tiers clearfix” div will expand to contain the floated children. This in turn, will cause it’s parent, the class=“pricing” section tag to expand downwards and contain the full height of it’s child.
