Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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
215,939 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

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;
}