Website style guide project: Box collapse issue

Hello :slight_smile:
I have an issue with box collapse on the intermediate CSS website style guide project and I cannot for the life of me work out why or how to fix it. I have set the stylesheet to have border box as the box style and added margins to the affected box but I still have an issue, this is the affected bit of CSS:

.fontcontainer{
    margin-bottom: 10px;
}
.left{
    border: 2px solid grey;
    display: inline-block;
    float: left;
    width: 48%;
    padding: 10px;
    margin-bottom: 10px;
}
.right{
    border: 2px solid grey;
    display: inline-block;
    float: right;
    width: 48%;
    padding: 10px;
    margin-bottom: 10px;
}
.stylecontainer{
    padding-left: 10px;
    margin-top: 10px;
}
.h1stylecontainer{
    border: 2px solid grey;
    margin-bottom: 10px;
}

My issue is that the ‘.h1stylecontainer’ is encompassing the the ‘.right’ and ‘.left’ container.
I have added the additional ‘.fontcontainer’ to try and add some buffer between the two different elements but am still having the same issue.
Does anyone know how to fix this or know what I am missing? Have I just over complicated it and added too many moving parts? This is really stumping me :tired_face:

Thank you!

Hi there,

So, I’m rather new–perhaps someone will respond after this and correct me if I’m wrong, (then we can both learn!), but float removes an element from the normal flow of a page, right? So, if something is floating left, another is floating right, and the .h1stylecontainer is between them, perhaps that’s why it’s encompassing the two? I’m not too sure without seeing the HTML layout, by maybe something wonky is happening with that. The information provided for float here might provide more assistance. Sorry if this doesn’t help, I just saw that no one has responded yet and figured if it helps, it helps–if not, maybe it’ll draw some attention from someone with more expertise!

Good luck!

1 Like

Thank you! I will give that a read and a try and see if that fixes it! :grinning: