Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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,486 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,486 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

<!-- 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

Thanks Cory! really appreciate your time :-)