Project Move - Making 3 div's stand side by side


#1

Yeah so how do you make 3 divs stand side by side?

heres the html:

<div class="supporting">
      <div class="container">
        <div class="col">
          <h2>Move</h2>
          <p>Become more active by tracking your runs, rides, and walks.</p>
           <div class="wrapper2"> <h2>Sync</h2>
          <p>access your activity on your phone, tablet or computer</p>
            </div>
         <div class="wrapper3">
          <h2>Compete</h2>
          <p>Set personal challenges and see have far you rank among your friends</p>
           <div>
        </div>

and here is the css i've tried:

.supporting {
  background-color:#1c1c1c;
  float:left;
  
}
.wrapper2 {
text-align:center;
}
.wrapper3 {
  float:right;
}

#3

How do i show you the Html?


#4

You have a couple of options, you could use display: inline-block, you could also just float all three to the left, this will try to position all the elements as far up and to the left as possible, i think this is a good way to go. Even better would be a grid system in case overflow

for next time, use one of the two following options to make your code/indent is visible:

select your code and press ctrl + shift + c (or cmd + shift + c if you use a mac)

if this instructions are unclear, you can also insert 3 backticks before and after your code, like so:

```
<p>visible</p>
```

the backtick is located above the tab key on your keyboard


#5

@itsapregnantday You should wrap each <h2> and <p> in it's own <div class="col-md-4">...</div>. This is how you're meant to do it, by using Bootstrap's grid system :slightly_smiling: