How do I add 3 horizontal buttons in wordpress post?

[coolsheet]

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

 

[R4Z0rA07]

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

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

 

[coolsheet]

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

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

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

 

[nandugan]

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>

 

[coolsheet]

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>

This worked. Awesome and much appreciated!

Cheers

 

[coolsheet]

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

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?

 

[IslandCat]

is all that text before the image divs?

 

[coolsheet]

is all that text before the image divs?

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

 

[yalokin]

You should clear the floats.

One way to do this:

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>

 

[coolsheet]

You should clear the floats.

One way to do this:

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>

This definitely worked! Cheers.