Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Lining up buttons with css WordPress


Hi Guys

What is the best way to line the buttons up on this page

See this screenshot:


Answers (4)


Kyle answers:

Right now they are centered, how do you Want them to align?

Kyle comments:

Sorry, small monitor haha, will follow up

Kyle comments:

You could set a min-height for the <p> text that is the same as the largest.

Can also write a quick jQuery script, that compares the heights of the three <p> areas, then sets the min-height for each based on the largest value? Would that work?

Steve Watson comments:

I want them all aligned vertically so they are on the same line, does that make sense.

The screenshot shows what I am trying to achieve

In chrome on Windows they look fine but not on Chrome on my mac. Why the difference?

Steve Watson comments:

haha yes our messages crossed.

yes the min height thing would work, I like it.

I want to try and steer clear of jQuery on my own site as I will get myself in all sorts of trouble. I'm only just getting my head around css :)

But thanks for the offer :)

Kyle comments:

From the look of the screencast, you are getting just a touch different padding (or margin), which is knocking the text onto an extra line on the first box.

Could have something to do with a font that is measured in em/rem, and is slightly bigger based on zoom, etc.

Kyle comments:

Do you want me to write up the css for you?


Jihan Ahmed answers:

wrap the inner text in a class like

<p class="inner-text">My background is in hospitality, looking after your customers wants, wishes and needs. I bring this to my web business fusing my knowledge of customer care and technology to build a business that thrives on happy clients.</p>

then on ur stylesheet set the minimum height like

.inner-text {min-height: 250px;}

adjust the height according to its need.

Jihan Ahmed comments:

also use the display: inline-block in button css it will prevent overriding of p text if use firebug u can see what I meant...

.btns {
background: none repeat scroll 0 0 #506986;
border-radius: 0;
color: #FFFFFF;
display: inline-block;
font-family: Lato;
font-size: 18px;
font-weight: 300;
padding: 10px 25px;


Fakhri Rahman answers:

it looks good on my chrome.


zebra webdesigns answers:

Hi Steve

Just an added suggestion. modify your code with media query. for the views less than 1141px three boxes goes one by one. not side wise.
so min-height makes it appear like more space. since each box goes 100% width.

@media all and (min-width:1140px){
#ez-home-top-container .inner-text {
min-height: 190px;