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 frederik christensen
frederik christensen
5,740 Points

Need help centering and floating a div

So i made some boxes for my prices . The problem is i need 1 to be centered, 1 to be floated on the left and 1 to be floated right. Can someone help me.

<div class="box_1">
    <h1 class="header">Basic Banner</h1>
    <h2 class="price">$5 - $10</h2>
    <ul class="inlude">
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
    </ul>
    <a class="buttom" href="#">Buy now</a>
</div>

<div class="box_1">
    <h1 class="header">Basic Banner</h1>
    <h2 class="price">$5 - $10</h2>
    <ul class="inlude">
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
    </ul>
    <a class="buttom" href="#">Buy now</a>
</div>

<div class="box_1">
    <h1 class="header">Basic Banner</h1>
    <h2 class="price">$5 - $10</h2>
    <ul class="inlude">
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
    </ul>
    <a class="buttom" href="#">Buy now</a>
</div>

.box_1  {
    border: solid 0px white;
    width: 500px;
    height: 430px;
    margin-top: 30px;
    margin-left: 10px;
    background-color: #eee;
    display: inline-block;
}

.box_1 > .header {
    text-align: center;
    background-color: #0066CC;
    padding: 10px;
    color: white;
}

.box_1 > .price {
    text-align: center;
    color: black;
    background-color: #eee;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.box_1 > .inlude > li {

    list-style: none;
    border-bottom: 1px solid #eee;
    text-align: center;
    padding: 20px 0 20px 0;
    background-color: white;

}

.box_1 > .buttom {
    font-size: 18px;
    text-decoration: none;
    color: white;
    border: solid 0px white;
    padding: 10px;
    margin: 20px auto 20px auto;
    display: block;
    width: 14%;
    background-color: #4CAF50;
}

4 Answers

Dion Dermott
Dion Dermott
15,875 Points

Hi Frederik,

Flexbox is perfect for this kind of thing. If you set the element containing the boxes to

display:flex; justify-content:space-between;

It just does its flexbox magic :)

See https://codepen.io/DeeDee23/pen/724f731ca70edc1f522a2ed7514bc7f2 for an example.

Hope this helps,

Dion.

frederik christensen
frederik christensen
5,740 Points
frederik christensen
frederik christensen
5,740 Points

https://gyazo.com/500bc9180cf475295262b4d3f6c7100c This is how it currently look

frederik christensen
frederik christensen
5,740 Points
frederik christensen
frederik christensen
5,740 Points

And i need it to be centered/floated in the middle

frederik christensen
frederik christensen
5,740 Points
frederik christensen
frederik christensen
5,740 Points

I fixed it by using that flexbox so your answer were correct :) Thanks for helping :)

Dion Dermott
Dion Dermott
15,875 Points

You're welcome.

If you want to learn more about flexbox I highly recommend the free Wes Bos course https://flexbox.io/