How do I add 3 horizontal buttons in wordpress post?

EDIT: Same question but should have titled this thread: "How do I add 3 Horizontal images to a wordpress post?"

I usually do this with a widget or some sort of page builder. If there is no page builder and all you get is the regular visual/text editor section, what coding would I add to the text or what would it look like?

So I basically need to have three images in a horizontal line, and formatted neat and centered, equivalent padding and such, so that I can just copy and paste it in posts. I have scoured the web for days, went to the wordpress.org forums and no answers there. Been trying to tackle this for about a week.

Really appreciate any help and BIG THANKS sent your way in advance.

Cheers

Check this out: http://jsfiddle.net/xmpDD/42/

If you want to generate cool buttons, then here : http://css-button-generator.com/

R4Z0rA07 said:

Check this out: http://jsfiddle.net/xmpDD/42/

If you want to generate cool buttons, then here : http://css-button-generator.com/

Click to expand...

How does this help me put 3 horizontal images in a wordpress post?

Copy and paste the code in your post and adjust them accordingly.

#rowp{ width:100%;}
#rowp .c1 {
float: left;
height:100%;
width: 22%;
padding: 15px;
}


img{width:71.66%;height: auto;}




</style>
<div id="rowp">
<div class="c1">
<div class="ic"><img src="Emotes-face-smile-icon.png" width="256" height="256" /></div>
</div>
<div class="c1">
<div class="ic"><img src="Emotes-face-smile-icon.png" width="129" height="130" /></div>
</div>
<div class="c1">
<div class="ic"><img src="Emotes-face-smile-icon.png" width="129" height="130" /></div>
</div>
</div>

nandugan said:

Copy and paste the code in your post and adjust them accordingly.

#rowp{ width:100%;}
#rowp .c1 {
float: left;
height:100%;
width: 22%;
padding: 15px;
}



</style>
<div id="rowp">
<div class="c1">
<div class="ic"><img src="Emotes-face-smile-icon.png" width="256" height="256" /></div>
</div>
<div class="c1">
<div class="ic"><img src="Emotes-face-smile-icon.png" width="129" height="130" /></div>
</div>
<div class="c1">
<div class="ic"><img src="Emotes-face-smile-icon.png" width="129" height="130" /></div>
</div>
</div>

Click to expand...

This worked. Awesome and much appreciated!

Cheers

nandugan said:

Copy and paste the code in your post and adjust them accordingly.

Click to expand...

So everything seemed to be alright but then I tested some text around it. The text underneath the buttons, shows up to the right like this



Any way to fix this?

is all that text before the image divs?

IslandCat said:

is all that text before the image divs?

Click to expand...

No the text to the right of the buttons is after. The text above is before.

You should clear the floats.

One way to do this:

yalokin said:

You should clear the floats.

One way to do this:

Code:

CSS:

.clear {
  clear: both;
}


HTML:

<div id="rowp">
    <div class="c1">
    <div class="ic"><img src="Emotes-face-smile-icon.png" width="256" height="256" /></div>
    </div>
    <div class="c1">
    <div class="ic"><img src="Emotes-face-smile-icon.png" width="129" height="130" /></div>
    </div>
    <div class="c1">
    <div class="ic"><img src="Emotes-face-smile-icon.png" width="129" height="130" /></div>
    </div>
    <div class="clear"></div>
</div>

Click to expand...

This definitely worked! Cheers.