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

Posted by John Levy
John Levy
1,451 Points

How to line boxes next to each other in a line

I have four boxes which I managed to line up next to one another and add text to them. The problem is the last two boxes should fall bellow the first two boxes. Right now the fifth box falls on the right hand side and the sixth box falls below the fifth one. How do I get the fifth and sixth box to fall under the first and second box? Thanks in advance. I have attached my code. HTML <!-- wrapper --> <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">

    <p class="text">
    Featuring the best professional bodybuilders from around the world.
    </p>

    <p class="price2">
    $11-$15
    </p>

    <p class="followers">
    Followers: 40K
    </p>


    <p class="following">
    Following: 600
    </p>
    </div>




   <a href="http://www.igshoutouts.com/igbodybuildingworld"> <button>SELECT</button></a>
</div>

<div class="box white_box">
    <span>ABSMOTIVATION101</span>

    <div class="image_holder"> <img src="absmotivation101.jpg" alt="smile">

    </div>


    <div class="bluebox">

    <p class="text2">
    Workouts and motivation to improve definition in your midsection.
    </p>

    <p class="price3">
    $9-$12
    </p>

    <p class="followers2">
    Followers: 31K
    </p>


    <p class="following2">
    Following: 200
    </p>
    </div>




   <a href="http://www.igshoutouts.com/absmotivation101"> <button>SELECT</button></a>
</div>

<div class="box white_box">
    <span>ABSINSPIRATION101</span>

    <div class="image_holder"> <img src="absinspiration101.jpg" alt="smile">

    </div>


    <div class="bluebox">

    <p class="text3">
    Workouts to help give you a shredded midesction along with training motivation.
    </p>

    <p class="price4">
    $4-$9
    </p>

    <p class="followers3">
    Followers: 27K
    </p>


    <p class="following3">
    Following: 900
    </p>
    </div>




   <a href="http://www.igshoutouts.com/absinspiration101"> <button>SELECT</button></a>
</div>

<div class="box white_box">
    <span>INSTAFITNESSLIFESTYLE101</span>
    <div class="image_holder"> <img src="instafitnesslifestyle101.jpg" alt="smile"> </div>
    <div class="bluebox">
    <p class="text4">
    Fitness tips and motivation to help get you in great shape and reach your fitness goals.
    </p>

    <p class="price5">
    $11-$15
    </p>

    <p class="followers4">
    Followers: 40K
    </p>


    <p class="following4">
    Following: 600
    </p>
    </div>


    <div>
    <a href="http://www.igshoutouts.com/instafitnesslifestyle101"> <button>SELECT</button></a>
</div>



   <div class="box white_box">
    <span>INSTAFITNESSTRANSFORMATIONS</span>
    <div class="image_holder"> <img src="instafitnesstransformations.jpg" alt="smile"> </div>
    <div class="bluebox">
    <p class="text5">
    Featuring the best transforanmtions
    </p>

    <p class="price4">
    $11-$15
    </p>

    <p class="followers5">
    Followers: 29K
    </p>


    <p class="following5">
    Following: 900
    </p>
    </div>


    <div>
    <a href="http://www.igshoutouts.com/instafitnesstransformations"> <button>SELECT</button></a>
</div>


<div class="box white_box">
    <span>GYMCOMEDY101</span>
    <div class="image_holder"> <img src="gymcomedy101.jpg" alt="smile"> </div>
    <div class="bluebox">
    <p class="text5">
    Gym comedy
    </p>

    <p class="price4">
    $4-$8
    </p>

    <p class="followers5">
    Followers: 29K
    </p>


    <p class="following5">
    Following: 900
    </p>
    </div>


    <div>
    <a href="http://www.igshoutouts.com/gymcomedy101"> <button>SELECT</button></a>
</div>

CSS

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

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

button {

transition: color .5s, background-color .5s; }

button:hover { border-color: black; background-color: black; color: #847bf7; }

span{                                               /*instagram name*/
    position: absolute;
    text-align: center;

    bottom: 20px; 
    top: 205px;
    font-size: 15px; 
    font-weight: bold;
}

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

}

.igbodybuildingworld{
    font-size:10px;
    font-weight:bold;
    text-align: center;

    color: black;

}
.text{
    font-size:16px;
    font-weight:regular;
    text-align: left;
    margin: 10px 5px 15px 5px;
    color: black;
}


.price2{
    font-size:32px;
    font-weight:regular;
    text-align: center;
    color: black;
    margin: -10px 0px -10px 0px;
}

.followers{
    font-size:18px;
    margin: 10px 0px 0px 0px;
    font-weight:regular;
    text-align: center;
    color: #646468;
    }

.following{
    font-size:18px;
    font-weight:regular;
    text-align: center;
    color: #646468;
    margin: 0px 0px 0px 0px;

}

.absmotivation101{
    font-size:18px;
    font-weight:bold;
    text-align: center;

    color: black;

}

.text2{
    font-size:16px;
    font-weight:regular;
    text-align: left;
    margin: 10px 5px 15px 5px;
    color: black;
}


.price3{
    font-size:32px;
    font-weight:regular;
    text-align: center;
    color: black;
    margin: -10px 0px -10px 0px;
}

.followers2{
    font-size:18px;
    margin: 10px 0px 0px 0px;
    font-weight:regular;
    text-align: center;
    color: #646468;
    }

.following2{
    font-size:18px;
    font-weight:regular;
    text-align: center;
    color: #646468;
    margin: 0px 0px 0px 0px;

}

.absinspiration101{
    font-size:18px;
    font-weight:bold;
    text-align: center;

    color: black;

}

.text3{
    font-size:16px;
    font-weight:regular;
    text-align: left;
    margin: 10px 5px 15px 5px;
    color: black;
}


.price4{
    font-size:32px;
    font-weight:regular;
    text-align: center;
    color: black;
    margin: -10px 0px -10px 0px;
}

.followers3{
    font-size:18px;
    margin: 10px 0px 0px 0px;
    font-weight:regular;
    text-align: center;
    color: #646468;
    }

.following3{
    font-size:18px;
    font-weight:regular;
    text-align: center;
    color: #646468;
    margin: 0px 0px 0px 0px;

}

.instafitnesslifestyle101{
    font-size:18px;
    font-weight:bold;
    text-align: center;

    color: black;

}

.text4{
    font-size:16px;
    font-weight:regular;
    text-align: left;
    margin: 10px 5px 15px 5px;
    color: black;
}


.price5{
    font-size:32px;
    font-weight:regular;
    text-align: center;
    color: black;
    margin: -10px 0px -10px 0px;
}

.followers4{
    font-size:18px;
    margin: 10px 0px 0px 0px;
    font-weight:regular;
    text-align: center;
    color: #646468;
    }

.following4{
    font-size:18px;
    font-weight:regular;
    text-align: center;
    color: #646468;
    margin: 0px 0px 0px 0px;

}

.instafitnesstransformations{
    font-size:18px;
    font-weight:bold;
    text-align: center;

    color: black;

}

.text5{
    font-size:16px;
    font-weight:regular;
    text-align: left;
    margin: 10px 5px 15px 5px;
    color: black;
}


.price6{
    font-size:32px;
    font-weight:regular;
    text-align: center;
    color: black;
    margin: -10px 0px -10px 0px;
}

.followers5{
    font-size:18px;
    margin: 10px 0px 0px 0px;
    font-weight:regular;
    text-align: center;
    color: #646468;
    }

.following5{
    font-size:18px;
    font-weight:regular;
    text-align: center;
    color: #646468;
    margin: 0px 0px 0px 0px;

}
Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

When posting code, be sure to use the formatting instructions from the Markdown Cheatsheet pop-up found below the text entry area.

2 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

There are many choices for basic element layout. You could:

  • put an explicit like break (<br>) where you want a line to end
  • reduce the wrapper width to cause the element to wrap around
  • create a table and put each box in its own table cell
  • use absolute positioning and place each box precisely where you want
  • use a flexbox and adjust the properties to arrange the items

There's probably others as well. There's a course here that might help in choosing and implementing a layout method: CSS Layout Basics.

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for the response. I understand their are different ways to lay it out but I dont understand why the fifth and sixth box does not go to the right side of the page and next to one another like the first four boxes do as I followed the same layout for all six boxes. Any help solving this problem would be great, thanks