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

Anne Donald
Anne Donald
9,847 Points
Posted by Anne Donald
Anne Donald
9,847 Points

Div's not aligning properly

I have the following code to try and align 4 divs in a row but the first two divs are not in align? very confused and any help would be gratefully received. Thank You!

.html5, .css3, .jquery, .bootstrap{

width: 200px;
height: 200px;
margin: 0 auto;
display: inline-block;

}

resources{

overflow: auto; text-align: center;
}

4 Answers

Cory Harkins
Cory Harkins
16,500 Points
Cory Harkins
Cory Harkins
16,500 Points 
<div id="resources"> 
  <h1>Resources</h1> 
  <section> 
    <div class="container2"> 
      <div class="html5"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quis cum officiis consectetur enim deserunt vero neque, eligendi dolorem consequatur quasi iure architecto saepe sequi, nesciunt laborum eveniet aut dolore.</p> 
      </div> 
      <div class="css3"> 
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab et qui error optio, est at enim iusto laboriosam sit voluptas, laudantium eos ad beatae inventore consequatur tempora quidem dolor possimus.</p> 
      </div>
      <div class="jquery">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat eum omnis, tempore fugit architecto et iure vero, quidem voluptatem libero nostrum, tempora labore ex, iste unde autem non mollitia consequatur?</p>
      </div>
      <div class="bootstrap">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit a architecto minus rem voluptatibus necessitatibus beatae natus eum ut cupiditate maiores nesciunt autem consequatur, nemo, incidunt molestiae aliquam qui soluta?</p>
      </div>
    </div>

a. You're missing a closing div tag for .container 2 b. in this instance < section > is not necessary, and could result in some funky code.

:) Also, check the markdown cheatsheet for ways to put code up cleanly! You got this, sorry for responding so late!

Cory Harkins
Cory Harkins
16,500 Points
Cory Harkins
Cory Harkins
16,500 Points

Hmmm....

Access to your html would be helpful, as the class names you've given to the divs are curious. Anyway, you are trying to center all divs, inline-block.

I suggest wrapping those divs in a container, centering that using margin: 0 auto;

Then removing the margin from your children divs.

Try that and let me know what happened. :)

Anne Donald
Anne Donald
9,847 Points
Anne Donald
Anne Donald
9,847 Points

<!-- Resources Used--> <div id="resources"> <h1>Resources</h1> <section> <div class="container2"> <div class="html5"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quis cum officiis consectetur enim deserunt vero neque, eligendi dolorem consequatur quasi iure architecto saepe sequi, nesciunt laborum eveniet aut dolore.</p> </div> <div class="css3"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab et qui error optio, est at enim iusto laboriosam sit voluptas, laudantium eos ad beatae inventore consequatur tempora quidem dolor possimus.</p> </div>

        <div class="jquery">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat eum omnis, tempore fugit architecto et iure vero, quidem voluptatem libero nostrum, tempora labore ex, iste unde autem non mollitia consequatur?</p>
        </div>

        <div class="bootstrap">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit a architecto minus rem voluptatibus necessitatibus beatae natus eum ut cupiditate maiores nesciunt autem consequatur, nemo, incidunt molestiae aliquam qui soluta?</p>
        </div>
    </div>

.html5, .css3, .jquery, .bootstrap{

width: 200px;
height: 200px;
display: inline-block;

}

.container2{ margin: 0 auto; }

resources{

overflow: auto; text-align: center;
}

Thank's for the quick response! (Sorry for some unknown reason the code I'm copying is overflowing!) I might be a little out of my depth here... but is what you mean?

Anne Donald
Anne Donald
9,847 Points
Anne Donald
Anne Donald
9,847 Points

Thanks Cory! really appreciate your time :-)