40

Consider the following jsFiddle: http://jsfiddle.net/mark69_fnd/yqdJG/1/

HTML:

<div id="container">
    <div class="char">
        AAA
    </div>
    <div class="char stickToRight">
        BBB
    </div>
</div>​

CSS:

#container {
    border:solid 2px green
}
.char { 
    display: inline-block;
    border: solid 2px red;
}
.stickToRight {
    float: right
}​

Is there another way to make .stickToRight be aligned right, without floating it?

I need to keep it as display:inline-block so that I can make its vertical alignment consistent with other .char elements.

How can I achieve the float:right right-alignment effect, whilst keeping the element display:inline-block? (Note that I do not know the width of the container element.)

I'd like purely CSS solutions, if there are any.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
mark
  • 59,016
  • 79
  • 296
  • 580

7 Answers7

22

I was having the same problem, and found out using direction: rtl; on the container is the best solution. https://css-tricks.com/almanac/properties/d/direction/

Marcos Pereira
  • 1,169
  • 14
  • 23
  • 4
    This is the best solution - came here to say this. Heres a quick example of a case where I used something like this. Doesn't match the example exactly but you get the idea. This allowed me to keep the structure the same in both cases so that on mobile (when I would display the image above) both examples would look the same. http://jsfiddle.net/uku099g8/ – FreddyBushBoy Aug 19 '15 at 09:30
  • 1
    Genius! Works just the way it's supposed to. – Firsh - justifiedgrid.com May 09 '18 at 21:33
  • Well, this messes up all the texts if you have other textual elements in the parent. – Amin Ya Feb 01 '21 at 18:55
17

An element can’t be inline-block and floated at the same time.

When an element is set to inline-block, it differs from display:inline elements in that it can have a width and height specified. However, it’s still part of the inline layout flow — its horizontal position is determined by its source order and the text-align property of its block-level parent, and its vertical position with the line is determined by the vertical-align property.

When an element is floated, it’s no longer part of the inline layout flow. Its horizontal position is determined by whether it’s floated left or right, and whether there are other floated elements before it, and its vertical position is determined by a fairly involved set of rules that Eric Meyer describes really well in CSS: the Definitive Guide, but that basically boil down to “the top of the inline box in which it would have appeared if it wasn’t floated”.

I’m still not quite sure what visual effect you’re imagining when you say you want the element to be floated and inline-block at the same time, but float layout is different from inline-block layout in terms of both horizontal and vertical position, and there isn’t any way to combine them.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
  • 4
    I did not say I wanted them floating. I want them aligned to the right. How it is achieved does not matter. – mark Nov 10 '12 at 14:23
  • 1
    I am OK with it, if it conveys the message better. – mark Nov 10 '12 at 16:06
  • Thanks for the explanation @PaulD.Waite very useful. I want the same effect which basically is: keep the element floated but make it break into a new line (like a block element would) if it must. Currently my floated element breaks our of its parent div. – Dimitris Jun 24 '14 at 11:28
  • The way I am currently achieving the effect is by making the *parent* element 'display: inline-block; width: 100%' but this might be specific to my case. – Dimitris Jun 24 '14 at 11:50
  • @Dimitris: “make it break into a new line (like a block element would) if it must”. There’s a bunch of complexity hidden in “if it must”. Anyhoo, if you’re having trouble trying to achieve something with CSS, that’s what the “Ask Question” button is for. – Paul D. Waite Jun 24 '14 at 12:26
  • I don't see a need to duplicate this question. "How to achieve the float:right effect while preserving the inline-block display?" is exactly what I would ask. – Dimitris Jun 24 '14 at 16:52
9

Since the inline element can not float, we can not build some complicate layout. Then flexbox was introduced and now we have a powerful technology can solve most layout problems. To achieve your expected result, just do simply like this:

#container {
  border: solid 2px green;
  display: flex;
}

.char {
  border: solid 2px red;
  ;
}

.float-right {
  margin-left: auto;
}
<div id="container">
  <div class="char ">
    AAA
  </div>
  <div class="char float-right">
    BBB
  </div>
</div>
Duannx
  • 7,501
  • 1
  • 26
  • 59
6

Apply text-align: right to parent div

Dmytro Lopushanskyy
  • 1,163
  • 9
  • 8
1

If you want to align to the right of its parent an element without using float, you can go for the CSS3 box-flex property. Here is a post with an example on how to use it : How to align on the right an inline-block element?

Mark that it's a CSS3 solution and therefore not compatible with all browsers (point at IE9-)

Community
  • 1
  • 1
Gonnarule
  • 350
  • 2
  • 7
0

I personally would avoid float: right and tabled displays at all costs, but that's my preference. I haven't found a better way to do this other than resorting to the necessary evil that is absolute positioning. Although, for this purpose, it might make display: inline-block useless, it usually gives the desired effect in these scenarios. An example would be (using your code as a guideline) a header, with the logo positioned as if "floating" left, and ul positioned as if "floating" right.

      <div class="container">
        <h1>Logo</h1>
        <ul>
          <li> Link 1 </li>
          <li> Link 2 </li>
        </ul>
      </div>

The basic CSS being:

   .container {
     max-width: 1200px;
     width: 100%;
     margin: 0 auto;
     position: relative;
     padding: 0 15px;
     box-sizing: border-box;
   }
   .container h1 {
     display: inline-block;
   }
   .container ul {
      padding: 0;
      margin: 0;
      display: inline-block;
      position: absolute;
      right: 15px; /* I use 15px to replicate the 15px padding on the container*/
   }
   .container ul li {
      display: inline-block;
   }

This is the scenario where I use this code most often. In most cases in the content I have percentage widths for my containers, removing the need (most of the time) for positioning. IE:

       <div class="container">
          <div class="left"></div>
          <div class="right"></div>
       </div>


       .container {
           max-width: 1200px;
           width: 100%;
           margin: 0 auto;
        }
        .left {
           display: inline-block;
           width: 60%;
           margin-right: -4px; /* I use this because I've noticed a 4px spacing when using inline block sometimes */
        }
        .right {
          display: inline-block;
          width: 40%;
          margin-right: -4px;
        }
Nathan Lykke
  • 71
  • 1
  • 11
-1

It may be too late to help with this, but just in case someone stumbles on this, here you go. Paul D. Waite, answered the source of your problem. I think I know what you're trying to achieve. I have done something "wrong" to accomplish that just in case you're desperate and you want to avoid Flexbox. Keep your last element inline-block, and float: right. and add this to it. .last-element-in-your-row

{
display: inline-block;
float: right;
/*add this to stick that guy on the right*/
position: relative;
right: 0;
top: 0;}

Again this is not the right way, but it works...

karimlo
  • 159
  • 2
  • 15