Css: Move a "Float:Right" Element to Top (To Align with the First Element of the List)

CSS: move a float:right element to top (to align with the first element of the list)

you have a small error, make it:

.field-field-artists { 

        width:400px; 
        float:right; 
        clear:right; 
        margin-top: -200px; 
    } 

Float right changing position of next element

Try this code:

.outer{
        display:flex;
        flex-direction:column;
        align-items:flex-end;
      }
.inner1 {
         width: 50%;
         height: 100px;
         border: 5px solid red;
        }
.inner2{
       width: 50%;
  }

<div class="outer">
<div class="inner1">

</div>
<div class="inner2">
Text that goes up after float.
</div>
</div>

Is it possible to float: right; align to top?

The thing about float is it removes the floated element from the DOM, so it doesn't know where the other elements are anymore to align itself. You need to wrap it in an unfloated div and then align that. The wrapping element needs to be "overflow: hidden" as well so it'll contain the entire floated element.

Why does the float-right element not go all the way to the top?

Good question, I have seen some people having difficulty understanding this. As per your question, I feel you want to align '3' to the top-right in the box. Your inner is 500 * 500, and your first and second is 300*300, since it cannot fit total of 600, the second one will go below first one. Then there is a space of 200 for third one. It will take next 200 space (next to second one) and the space above is not utilized. To get desired output, what you want is shift 3 up as shown below so that the space of 200 in the top right is utilized first.

May be this can help you:

  <div class="wrapper">
  <div class="inner third alg">3</div>
  <div class="inner first">1</div>
  <div class="inner second ">2</div>
  </div>

CSS code:

.wrapper {
  width: 500px;
  height: 500px;
  margin: 100px auto;
  border: 1px solid black;
}

.inner {
  border: 1px solid black;
  box-sizing: border-box;
}

.first, .second {
  float: left;
  width: 300px;
  height: 300px;
}

.alg{
  text-align: right;
}

.third {
  width: 200px;
  height: 200px;
  float: right;
}

I hope this makes things more clear to you now. If not comment below, I can explain with some more examples.

How to get float:right button to vertically align in the middle

The cleanest way to do that is to use flex like this:

1. Add display: flex to your outer div panel-footer [Check code below]

2. Remove the float and use text-align:right on the span for the button. [Check code below]

3. Add align-self: center to the inner span. [Check code below]

---

For 1:

.panel-footer {
    height: 70px;
    border: solid;
    display:flex;
}

For 2:

.header-footer-item {
        text-align: right;
}

For 3:

.header-footer-item {
    align-self: center;
}

jsFiddle: https://jsfiddle.net/d1vrqkn9/4/

Using float to place an element in the right side with CSS

Am not sure if this is what you need exactly, see the updated fiddle
http://jsfiddle.net/ov74xcyg/1/
Basically, i have used position absolute to move your last child of the navigation to the right side and increased width of the navigation till the end of the header.

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  padding: 10px 100px;
  z-index: 500;
  box-sizing: content-box;
  transition: .3s;
  background: red;
}

nav.white {
  background: white;
  height: 35px;
  padding: 10px 100px;
  transition: .5s;
}

nav ul {
  list-style: none;
  float: left;
  margin: 0;
  padding: 0;
  display: flex;
  width: 90%;
   position: relative;
}

nav ul li {
  list-style: none;
}

nav ul li:last-child {
  display: inline-block;
    right: 5%;
    position: absolute;
    top: 0;
}

nav ul li a {
  line-height: 80px;
  color: #FFFFFF;
  margin: 12px 30px;
  text-decoration: none;
  text-transform: capitalize;
  transition: .5s;
  padding: 10px 5px;
  font-size: 16px;
}

nav ul li a:hover {
  background-color: rgba(255,255,255,0.2);
}

nav.white ul li a {
  color: #000;
  line-height: 40px;
  transition: .5s;
}

nav ul li a:focus {
  outline: none;
}

    <div class="wrapper">
      <nav>
        <ul>
          <li><a href="#">LOGO</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a class="contact" href="#">Contact</a></li>
        </ul>
      </nav>

Make sure a float:right element is vertically aligned to the top, even if next to a float:left element

Float the label div inside the title div, that will wrap the title text around the label regardless of the width of either.

<div class="infoBox">
<div class="inner">
    <div class="entry">
        <div class="title">
        <div class="type">
            LABEL
        </div>
            If this text is longer, the LABEL will drop downwards.
            I would like to have the LABEL float right (as it does here) but also be at the top of the block. 
        </div>
    </div>
</div>

​

---

Related Topics