CODEWITHSUNDEEP
htmlcssalignment
RS92
RS92

Reputation: 485

Why I can't align two buttons

I have problem, I can't align two buttons in one line.

I tried to set padding of span class pptext2 but without success. Here is code http://jsfiddle.net/71782p4L/1/

HTML

<div class="ppdiv">
<button class="ppenvelope"><img src="http://i.imgur.com/RfLMyak.jpg" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATE MESSAGE</span></button>
</div><!--Zatvoren ppdiv-->

CSS

.ppdiv{
    padding-top:22px;
    padding-left: 19px;

}
.ppdiv img{
    padding:10px;
    font-size: 20px;
}
.ppenvelope{
    border:none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
   background: #b2d4dd;
}
.pptext{
    border:none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
       background: #c9e0e6;
}
.pptext2{
    display: inline-block;
     color:#4c6974;
       padding-top: 15px;
       padding-bottom:13px;
       padding-left: 13px;
}

Upvotes: 0

Views: 97

Answers (3)

igi33
igi33

Reputation: 51

I would set float: left; on both buttons and overflow: hidden; on .ppdiv. To make sure both buttons stay the same height, also set height on them (e.g. height: 48px;). You can also remove the span.pptext2 element altogether, unless you need it for other purposes. Take a look at the fiddle: https://jsfiddle.net/igi33/ck4w6cLq/1/.

HTML:

<div class="ppdiv">
    <button class="ppenvelope">
        <img src="http://i.imgur.com/RfLMyak.jpg" alt="Slika">
    </button>
    <button class="pptext">PRIVATE MESSAGE</button>
</div>

CSS:

.ppdiv{
    overflow: hidden;
}
.ppenvelope, .pptext {
    float: left;
    border: none;
    height: 48px;
}
.ppenvelope{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #b2d4dd;
}
.ppdiv img{
    padding:10px;
}
.pptext{
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: #c9e0e6;
    color:#4c6974;
}

Upvotes: 1

Scotho
Scotho

Reputation: 31

https://jsfiddle.net/71782p4L/2/

Here you are.

.ppdiv {
    height:43px; 
    overflow:hidden;
}
.ppdiv img {
    padding:10px;
}
.ppenvelope {
    border:none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #b2d4dd;
    float:left;
    height:100%; /*Sets height to 100% of current container, of which is ppdiv (43px) */
}
.pptext {
    border:none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: #c9e0e6;
        height:100%; /*Sets height to 100% of current container, of which is ppdiv (43px)*/
}

Upvotes: 0

Sumit
Sumit

Reputation: 1639

Use vertical-align: middle; on both buttons.

.pptext {
  background: none repeat scroll 0 0 #c9e0e6;
  border: medium none;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  vertical-align: middle;
}

.ppenvelope {
  background: none repeat scroll 0 0 #b2d4dd;
  border: medium none;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  vertical-align: middle;
}

Upvotes: 1

Related Questions