CSS

Anne Donald
Anne Donald
5,117 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
PRO
Cory Harkins
Pro Student 6,738 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
PRO
Cory Harkins
Pro Student 6,738 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
5,117 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
5,117 Points

Thanks Cory! really appreciate your time :-)