Question

I have recently installed and modified a certain template on my wordpress blog. All of the modifications are very simple(removing divs I didn’t want), but please consider the fact that I know next to nothing about webdesigning.

Like I explained in my previous question, I am trying to display two buttons side by side, each of them linking to a specific page in my website.

My first setback was trying to get them to display, since the template parsed clear-text instead of converting a short-code into a button (I’m using a plugin called MaxButtons – for those who don’t know it, it makes the creation and management of buttons simpler). Thankfully I overcame it with the help of a stackoverflow member, who told me to use the do_shortcode function. Right now, my code looks like this:

<div class="slider-wrapper">

    <div class="full_content">
    <center>
                       <h1></h1><h1></h1>
                       <h2></h2> 
             <p></p>
            <p></p>

    </center>
    </div>
</div>

My most recent problem and the reason why I am asking this question is, how can I get the buttons to display side by side? At the moment, button2 just shows in front of button 1, which is obviously unwanted. They show up like this:

I figured I should post the part of my style-sheet that refers to that specific part of the website (I am actually not sure if this is it..)

/*=====Slider-Style Start
========================================*/
.slider-wrapper {
    width:950px;
    height:400px;
    background:url(images/slide-shaddow.png) 85px 334px no-repeat;
    margin-bottom:0px;
}
#container {
    width:581px;
    margin:0 auto;
    position:relative;
    float:left;
    z-index:0;
    background-color:#fff;
}
#example {
    width:581px;
    height:333px;
    position:relative;
    margin-left:0;
    background-color:#fff;
}
#frame {
    position:absolute;
    z-index:0;
    width:739px;
    height:341px;
    top:-3px;
    left:-80px;
}
/*
        Slideshow
*/

#slides {
    position:absolute;
    top:15px;
    left:0px;
    z-index:10;
    background-color:#fff;
}
.slides_container {
    width:581px;
    overflow:hidden;
    position:relative;
    display:none;
    background-color:#fff;
}
.slides_container div.slide {
    width:581px;
    height:325.4px;
    display:block;
    background-color:#fff;
}
.slides_container div.slide img, .slides_container div.slide iframe{
    width:581px;
    height:325.4px;
}
/*
        Next/prev buttons
*/

#slides .next {
    position:absolute;
    top:107px;
    right:-220px;
    width:24px;
    height:43px;
    display:block;
    z-index:101;
}
#slides .prev {
    position:absolute;
    top:107px;
    left:-25px;
    width:24px;
    height:43px;
    display:block;
    z-index:101;
}
#slides .next {
    left:585px;
}
/*
        Pagination
*/

.pagination {
    margin:26px auto 0;
    width:100px;
    position:absolute;
    left:25px;
    bottom:-25px;
    z-index:9999999px;
}
.pagination li {
    float:left;
    margin:0 2px;
    list-style:none;
}
.pagination li a {
    display:block;
    width:13px;
    height:0px;
    padding-top:13px;
    background-image:url(images/pagination.png);
    background-position:0 0px;
    float:left;
    overflow:hidden;
}
.pagination li.current a {
    background-position:0 -13px;
}
.slider-info {
    margin-top:15px;
    padding-top:25px;
    padding-left:23px;
    padding-right:20px;
    height:299.3px;
    width:326px;
    float:right;
    border-top:1px dotted #888;
    background-color:#fff;
}
.slider-info h1 {
    font-size:26px;
    line-height:35px;
    margin-bottom:30px;
}
.slider-info p {
    line-height:24px;
    text-shadow: .1px .1px .1px #aaa;
    font-size:14px;
}
/*=====Slider-Style End
========================================*/

Any help is appreciated, thank you in advance 🙂

Answer 1

display: inline-block is a good way to accomplish this. It can be styled like a block-element but doesn’t force a line-break.

Since you are using a shortcode to display the button markup we can not help you with the exact css rules. I guess however that it will output something like this:

<p>This is a button: <a href="/1" class="button">Button</a> 
<a href="/2" class="button">Button</a>]</p>

or this:

<p>This is a button: <button class="button">Button</button> 
<button class="button">Button</button></p>

In either case you would add display: inline-block; to the class that is targeting the button element:

.button {
    display: inline-block;
    /* add more crazy CSS3 stuff like rounded corners and gradients... */
}

The result would be two buttons sitting next to each other in the same line.

Further reading: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/