I have the following layout:

Which as you can see the "Learn More" buttons are all in line but with the CSS I am using they lose there text align center and don't align to each section.

 

I am using the following CSS:

Parent Div:

#homeServicesWrapper
{
  text-align: center;
  margin-top: 20px;
  position: relative;
}

Child class (Learn More Buttons):

display: inline-block;
position: absolute;
bottom: 0px;

My aim is to get all of the learn more buttons at the same level all inline with each other as when I take the above CSS off they result in being at different heights and are not inline with each other. I was trying to push them down to the bottom of the #homeServicesWrapper div.

 

Here is my HTML layout if that helps to see it:

<div id="homeServicesWrapper">

        <div class="serviceInfoWrapper">

          <div class="serviceImageWrapper">

            <img src="images/contract.png">

          </div>

          <p class="biggerP"><b>MOT Servicing</b></p>

          <p>We are an approved MOT testing station. All cars over 3 years old require a valid MOT certificate by law.  We have the latest equipment and training to ensure your vehicle is tested properly.	</p>

          <a class="defaultButton" href="#">Learn More</a>

        </div>

        <div class="serviceInfoWrapper pushLeft60">

          <div class="serviceImageWrapper">

            <img src="images/motIcon.png">

          </div>

          <p class="biggerP"><b>Diagnostics & Repair</b></p>

          <p>We can carry out all types of repairs some of which include brakes, auto-eletrical cam belts, clutches, head gaskets, turbos, water pumps, radiators, air conditioning. The list is endless...</p>

          <a class="defaultButton" href="#">Learn More</a>

        </div>

        <div class="serviceInfoWrapper pushLeft60">

          <div class="serviceImageWrapper">

            <img src="images/settings.png">

          </div>

          <p class="biggerP"><b>Specialist Services</b></p>

          <p>We have up-to-date repair and service information enabling us to save you money and have your car repaired correctly and safely.</p>

          <a class="defaultButton" href="#">Learn More</a>

        </div>

      </div>

Anyone?

Stick all of the code into something like JSFiddle so that we can take a better look.

For a start don't use ID's in your CSS.

 

Why are you applying position absolute and bottom: 0 on your buttons? What are you trying to achieve with that? By default the buttons will come under the text if they are placed after it in the markup - which semantically speaking it should do anyway. I'd advise you remove those properties.

 

If you want all of the boxes to be equal height then you have quite a lot more work involved, and to be honest I think you want to spend more time learning CSS in greater detail before you attempt to tackle that. But as an aside my grid system does offer dynamic equal heights.
https://github.com/rbrtsmith/rbrtsmith-grid

Edited May 6, 201610 yr by rbrtsmith

Stick all of the code into something like JSFiddle so that we can take a better look.

Here we go: https://jsfiddle.net/myhox4gh/3/ I took the buttons out of the position: relative; and position: absolute; state.

I've had a look at your fiddle and the buttons are displaying as expected on a separate line, isn't that what you wanted?

 

Like RbrtSmith as saying though if you want them to line up correctly then you've got a lot more work to do to achieve that. Also like rbrtsmith said try not to use id's in your CSS as they are very specific and don't really allow for reuse of your code.

I've had a look at your fiddle and the buttons are displaying as expected on a separate line, isn't that what you wanted?

 

Like RbrtSmith as saying though if you want them to line up correctly then you've got a lot more work to do to achieve that. Also like rbrtsmith said try not to use id's in your CSS as they are very specific and don't really allow for reuse of your code.

 

Ok thank you for taking a look, but is there any tutorial or website you could direct me in so I could learn more about what I have to do?

You need to learn CSS there's no direct tutorial as this is a specific use case. Once you understand CSS you wont need any tutorials to create a layout. Codeschool do good CSS courses.