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! While you're at it, check out some resources Treehouse students have shared here.

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

Alexandra Cianciara
Alexandra Cianciara
2,465 Points
Posted by Alexandra Cianciara
Alexandra Cianciara
2,465 Points

Boxes layouts in CSS

Hi, I am trying to do 2 rows with 2 boxes in each (4). Each box has a header and CTA and background image. The boxes are styled.

I'm using the floating method but all got all over the place. Please could anyone help me?

    <div class="cta-boxes1 group">

           <div class="container-boxes1">
                <h2 class="container-heading">TRY FIRST CLASS FOR FREE</h2>
                <h3 class="container-cta">CONTACT US</h3>    
           </div>

           <div class="container-boxes2">
                <h2 class="container-heading">ABOUT ROB REED BOOT CAMP</h2>
                <h3 class="container-cta">LEARN MORE</h3>    
          </div>
      </div>          

      <div class="cta-boxes2 group">

           <div class="container-boxes3">
                <h2 class="container-heading">STAY MOTIVATED</h2>
                <h3 class="container-cta">READ MORE</h3>    
           </div>

           <div class="container-boxes4">
                <h2 class="container-heading">BOOT CAMP LOCATION</h2>
                <h3 class="container-cta">LEARN MORE</h3>    
           </div>    

      </div>

CSS

.container-heading { background-color: black; opacity: 0.5; color: white; padding-top: 5%; padding-bottom: 5%;
}

.container-cta { margin: auto;
width: 40%;
background-color: black; opacity: 0.5;
color: white; border: 0.5px solid white;
padding-top: 3%; padding-bottom: 3%;
}

.container-boxes1 {
float: right;
}

.container-boxes2 { float: left;
}

.container-boxes3 { float: left;
}

.container-boxes4 { float: left;

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

2 Answers

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

One issue is that the CSS rule for ".container-boxes4" is missing a final closing brace.

Another issue is that the percentage units you are using for the vertical padding is based on the width of the element, which makes them all different. Assuming you want consistent but responsive padding, you might want to try using "vh" units instead.

Otherwise it seems to look as I'd expect from the CSS. If you have other issues, perhaps you could describe what you're intending in more detail.

Alexandra Cianciara
Alexandra Cianciara
2,465 Points
Alexandra Cianciara
Alexandra Cianciara
2,465 Points

Thanks Steve. I didn't copy the closing bracket here.

I managed to sort it our but I'd like to be able to centre 2 boxes within the row. I tried adding margins, padding but its pushing boxes on the right. Copying again my html and css. Not sure what I'm doing wrong. Also, the reason I put separate .container-boxes1 2, 3 and 4 is that I will be updating to different images.

<div class="cta-boxes"> 

              <div class="cta-boxes1 group">

                   <div class="container-boxes1">
                        <h3 class="container-heading">TRY FIRST CLASS FOR FREE</h3>
                        <h4 class="container-cta">CONTACT US</h4>    
                   </div>

                   <div class="container-boxes2">
                        <h3 class="container-heading">ABOUT BOOT CAMP</h3>
                        <h4 class="container-cta">LEARN MORE</h4>    
                  </div>
              </div>          

              <div class="cta-boxes2 group">

                   <div class="container-boxes3">
                        <h2 class="container-heading">STAY MOTIVATED</h2>
                        <h3 class="container-cta">READ MORE</h3>    
                   </div>

                   <div class="container-boxes4">
                        <h2 class="container-heading">BOOT CAMP LOCATION</h2>
                        <h3 class="container-cta">LEARN MORE</h3>    
                   </div>    

              </div>         
         </div>

CSS

.cta-boxes { width: 100%; margin: 0 auto; text-align: center;
}

.container-boxes1 { background-image: url(img/hitandwholebody.jpg); background-size: cover; background-repeat: no-repeat;
background-position: center;
background-color: grey;
opacity: 50;
padding: 2%; padding-bottom: 5%; padding-top: 5%;
width: 35%;
text-align:center; margin: left: 150%;
margin-bottom: 4%;
}

.container-boxes2 { background-image: url(img/hitandwholebody.jpg); background-size: cover; background-repeat: no-repeat;
background-position: center;
background-color: grey;
opacity: 50;
padding: 2%; padding-bottom: 5%; padding-top: 5%;
width: 35%;
text-align:center; margin: auto;
margin-bottom: 4%;
}

.container-boxes3 { background-image: url(img/hitandwholebody.jpg); background-size: cover; background-repeat: no-repeat;
background-position: center;
background-color: grey;
opacity: 50;
padding: 2%; padding-bottom: 5%; padding-top: 5%;
width: 35%;
text-align:center; margin: auto;
margin-bottom: 4%;
}

.container-boxes4 { background-image: url(img/hitandwholebody.jpg); background-size: cover; background-repeat: no-repeat;
background-position: center;
background-color: grey;
opacity: 50;
padding: 2%; padding-bottom: 5%; padding-top: 5%;
width: 35%;
text-align:center; margin: auto;
margin-bottom: 4%;
}

.container-cta { margin: auto;
max-width: 150px;
width: 200px; height: 20px;
background-color: black; opacity: 0.5;
color: white; border: 0.5px solid white;
padding-top: 2vh; padding-bottom: 2vh; margin-top: 20px;
text-align: center;
}

.container-heading { margin: auto;
width: 300px; height: 8px;
background-color: black; opacity: 0.5; color: white; padding-top: 2vh; padding-bottom: 5vh; padding-right: 0.5vh;
text-align: center;
}