CODEWITHSUNDEEP
htmlcss
webmonkey237
webmonkey237

Reputation: 379

Align inline-block to the right without using float

I'm using a content management system and I have setup the client with a class to make there own buttons by selecting text and applying the class. Now the client wants all the buttons to right align which is easy with a "float:right;" but it appears overlap any content below the button so I was wondering if anyone knows the fix or a better approach to this problem, keeping in mind its within a CMS which just applies a class to a p or span.

.LinkButtons {
display: inline-block;
*display: inline;
padding:5px 10px 5px 10px;
background-color:#00649c;
color:#fff;
text-decoration:none;
font-weight:bold;
font-size:12px;
float:right;
}

.LinkButtons:hover, .linkbuttons:hover {background-color:#00718b; cursor:pointer; text-decoration:none;}
.LinkButtons a, .linkbuttons a {color:#fff; text-decoration:none;}
.LinkButtons a:hover, .linkbuttons a:hover {color:#fff; text-decoration:none;}

<p>Text above</p>
<p class="LinkButtons">MORE INFO</p>
<p>Text below gets the button overlapping due to the float floating over top</p>

Upvotes: 0

Views: 7593

Answers (2)

Ejaz
Ejaz

Reputation: 8872

Ok i've got what you mean.try this jsfiddle. You want the inline block element to clear all space on its left. This can be achieved by adding following rule to your CSS 

.LinkButtons + p {
    clear: right;
}

This sets all <p> elements, that are next sibling of the said button, to not allow anything on their right. Of course you can modify this rule to accommodate other elements that you expect to appear after the button. Or you can do 

.LinkButtons + * {
    clear: right;
}

for all :)

Update

Using this technique will not allow multiple buttons on same, use following if you want to put multiple buttons on same line.

/* Replace */
.LinkButtons + * {
    clear: right;
}

/* With */

.LinkButtons+:not(.LinkButtons){
    clear: right;
}

The rule only clears the right for elements that are no buttons themselves.

jsfiddle

Upvotes: 3

Freesn&#246;w
Freesn&#246;w

Reputation: 32143

Take a look at this jsFiddle here:

http://jsfiddle.net/a8qqU/

I made a wrapping div that had the inline button as a child. I then used the text-align property and set it to "right" to align the button to the right.

CSS:

.LinkButtons {
    display: inline-block;
    *display: inline;
    padding:5px 10px 5px 10px;
    background-color:#00649c;
    color:#fff;
    text-decoration:none;
    font-weight:bold;
    font-size:12px;
}

.align-right {
    text-align:right;
}

.LinkButtons:hover, .linkbuttons:hover {
    background-color:#00718b;
    cursor:pointer;
    text-decoration:none;
}

.LinkButtons a, .linkbuttons a {
    color:#fff;
    text-decoration:none;
}

.LinkButtons a:hover, .linkbuttons a:hover {
    color:#fff;
    text-decoration:none;
}

HTML:

<p>Text above</p>
<div class="align-right"><p class="LinkButtons">MORE INFO</p></div>
<p>Text below gets the button over top</p>

Upvotes: 2

Related Questions