Aligning elements inside a box

Question

I am trying to align items inside a div, I've read some questions but still have this doubt.

What I currently have:

The code is

.wrapper {
  border: 1px solid black;
  width: 50%;
  display: flex;
  align-items: center;
}
.image {
  border: 1px solid green;
}
.title {
  border: 1px solid blue;
  margin-left: 1%;
}
p {
  border: 1px solid red;
  float: right; /* Does not work */
}

<div class="wrapper">
  <span class="image">
    <img src="http://opae.a-superlab.com/forum/styles/art_air/imageset/forum_read.png">
  </span>
  <span class="title">Category Title</span>
  <p>Category description</p>
</div>

The float: right for category description is NOT working :( I want it to be positioned in extreme right side of the block.

Setting margin-left to an explicit length is not an option because the content of "category description" is variable.

The question seems a mix of [Right-aligning flex item?](http://stackoverflow.com/questions/22429003/right-aligning-flex-item) and [Can I use flexbox and float at the same time?](http://stackoverflow.com/q/31953105/1529630). — Oriol, Jan 08 '16 at 06:56
@Oriol please don't be so hasty and allow me to rephrase the question :| I want a solution to this problem edit-- nevermind, thanks! — RhinoFreak, Jan 08 '16 at 07:07

score 1 · Accepted Answer · edited May 23 '17 at 11:59

That's because you are using flexbox, so float is ignored as explained in the spec:

In Overview:

Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as floats and columns.
In Flex Containers

float and clear have no effect on a flex item, and do not take it out-of-flow. However, the float property can still affect box generation by influencing the display property’s computed value.

In an example in Flex Items

<div style="display:flex">
    <!-- flex item: floated element; floating is ignored -->
    <div id="item2" style="float: left;">float</div>
</div>

However, as explained in Right-aligning flex item?, in flexbox you can use margin-left: auto to push a flex item to the right:

.wrapper {
  border: 1px solid black;
  width: 50%;
  display: flex;
  align-items: center;
}
.image {
  border: 1px solid green;
}
.title {
  border: 1px solid blue;
  margin-left: 1%;
}
p {
  border: 1px solid red;
  margin-left: auto;
}

<div class="wrapper">
  <span class="image">
    <img src="http://opae.a-superlab.com/forum/styles/art_air/imageset/forum_read.png">
  </span>
  <span class="title">Category Title</span>
  <p>Category description</p>
</div>

Okay so how do I achieve what I want without using flexbox? I want it to look exactly like the current output of code except for category description to move to extreme right. — RhinoFreak, Jan 08 '16 at 07:01
As explained in [Right-aligning flex item?](http://stackoverflow.com/q/22429003/1529630), in flexbox you can use `margin-left: auto` to push a flex item to the right. — Oriol, Jan 08 '16 at 07:06
thanks a lot! That helped me and sorry for asking a question that was already answered! — RhinoFreak, Jan 08 '16 at 07:08

Aligning elements inside a box

1 Answers1