How to place more than two boxes next to each other

Question

Right now I have two boxes next to one another but box three and four fall under the first two not next to one another. What am I doing wrong? I have attached the code below. Thanks in advance HTML  <div class="wrapper">

<!-- white boxes -->

<!-- box -->
<div class="box white_box">
    <span>IGBODYBUILDINGWORLD</span>
    <div class="image_holder"> <img src="igbodybuildingworld.jpg" alt="smile"> </div>
    <div class="bluebox"></div>
    <p>followers:26K</p>
    <button>SELECT</button>
</div>

<div class="box white_box">
    <span>ABSMOTIVATION101</span>
    <div class="image_holder"> <img src="absmotivation101.jpg" alt="smile"> </div>
    <div class="bluebox"></div>
    <button>SELECT</button>
</div>


<div class="box white_box">
    <span>ABSINSPIRATION101</span>
    <div class="image_holder"> <img src="absinspiration101.jpg" alt="smile"> </div>
    <div class="bluebox"></div>
    <button>SELECT</button>
</div>

<div class="box white_box">
    <span>INSTAFITNESSLIFESTYLE101</span>
    <div class="image_holder"> <img src="instafitnesslifestyle101.jpg" alt="smile"> </div>
    <div class="bluebox"></div>
    <button>SELECT</button>
</div>

CSS /padding and borders compensation/ div{ box-sizing: border-box; } /add wrraper for control blocks flow/ .wrapper{ position: relative; width: 550px; margin: 0 ; text-align: left; }

/*add shared styles for all boxes*/
.box{ 
    position: relative; 
    width: 250px; 
    margin: 0 7px 15px 7px;
    padding: 25px; 
    text-align: center; 
    background: #fff; 
    display: inline-block; 
    vertical-align: top; 
}
/*add styles only for white boxes*/
.white_box{ 
    height: 550px; 
    border: 1px solid #000; 
}
    /*image holder*/
    .image_holder{                      /*instagram image*/
        position: relative; 
        width: 150px; 
        height: 150px; 
        margin:-10px 0 0 0; 
        border: 5px solid #ccc; 
        border-radius: 75px; 
        display: inline-block; 
        overflow: hidden; 
    }
        .image_holder img{ width: 100%; }

/*add styles for button*/
button{ 
    position: absolute;
    width: 200px; margin: 0 0 0 -100px; 
    left: 50%; bottom: 25px; 
    background: #847bf7; 
    border: solid 1px; 
    font-size: 36px; 
}

span{                                               /*instagram name*/
    position: absolute;
    width: 100px; margin: 0 0 0 -110px; 
    left: 50%; bottom: 20px; 
    top: 205px;
    font-size: 20px; 
}

.bluebox{
     position: relative; 
        width: 248px; 
        height: 289px; 
        margin: 59px 40px 0px -25px; 
        background: #847bf7; 
        display: inline-block; 

}

Answer 1 · 2016-08-10T04:59:55Z

August 10, 2016 4:59am

Hi John:

If I am reading your code correctly, you have 4 individual 250px width boxes (.box) being displayed in a 550px width (.wrapper) div.

After the second the box is rendered, the width of both boxes together is 500px plus the 28px of margin between them. The third and fourth boxes will be pushed below boxes one and two because the wrapper's defined width of 550px isn't wide enough to display them in a single row.

To get all four boxes to appear in a single line, I would increase the width of the .wrapper div, or decrease the width of the .box divs.

Hope that helps!

Answer 2 · 2016-08-10T05:15:33Z

August 10, 2016 5:15am

Thanks that worked perfectly

Welcome to the Treehouse Community

Looking to learn something new?

John Levy

John Levy

How to place more than two boxes next to each other

2 Answers

Daniel Cicconi

Daniel Cicconi

John Levy

John Levy