Block element after inline-block

1
votes

I have the following html:

<div id="wrapper">
    <div class="inline-block"></div>
    <div class="inline-block"></div>
    <div class="inline-block"></div>
    <div class="block"></div>
</div>

Now, the inline elements have display: inline-block. I need it to vertical align them. The block element is display: block.

This gives the following result (first image):

enter image description here

Since I want the pink element (block) to be on the right, if I try to set it to float: right, I get the other elements misplaced to the left leaving a margin on the right corresponding to the width of the block element. Any help?

2
htmlcss
What's your CSS? And could you maybe post a demo, to make it easier for us to help you (and also replicate your problem)? - David Thomas

2 Answers

2
votes

You should wrap pink block in a div and set the pink block to float:right there.

<div id="wrapper">
    <div class="inline-block"></div>
    <div class="inline-block"></div>
    <div class="inline-block"></div>
    <div class="wrapper-inner clearfix">
        <div class="block" style="float:right"></div>
    </div>
</div>

If there is content aber this inner wrapper you can add a clearfix class - because floating elements don't give their parent element a height:

    .clearfix:after {
        content:"";
        display:table;
        clear:both;
    }
1
votes

HTML

<div id="wrapper">
    <div class="inline-block"></div><!-- remove the whitespace
 --><div class="inline-block"></div><!-- because inline-blocks
 --><div class="inline-block"></div><!-- dont fully collapse whitespace
 --><div class="block"></div>
</div>

CSS

#wrapper {
  text-align: right; /* moves inline-blocks to the right */
  position: relative; /* to give context for absolute positioning of .block */
}

.inline-block {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: #f40;
}

.block {
  display: block;
  width: 30px;
  height: 30px;
  background: blue;
  position: absolute;
  right: 0; /* move the block to the far right of #wrapper */
}

e.g: http://jsbin.com/etuxab/2/edit