Float:Right Not Floating All The Way to The Right

Float: right; not floating all the way

Add text-align:right; in .alignright class

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

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.

CSS float right not working correctly

you need to wrap your text inside div and float it left while wrapper div should have height, and I've also added line height for vertical alignment

<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray;height:30px;">
   <div style="float:left;line-height:30px;">Contact Details</div>

    <button type="button" class="edit_button" style="float: right;">My Button</button>

</div>

also js fiddle here =)
http://jsfiddle.net/xQgSm/

Float right element not floating entirely right

Updated fiddle (colored the left/right floats so you can see what happens)

Because of these 2 properties in your CSS rule

.service-tab-block {
    padding: 3.5em 20px;
    width: 85%;

I changed/added it to this

.service-tab-block {
    width: calc(100% - 60px);   /* compensate for the padding and margin */
    ....
}
#service-tabs-right .service-tab-block {
    margin-left: 20px;
}

---

For the transition, change

transition:width 0.2s ease;
-webkit-transition:width 0.2s ease;

to

transition:all 0.2s ease;
-webkit-transition:all 0.2s ease;

div not floating right

Re-order your HTML to:

<div id="wrapper960"  style="min-height:350px; border:1px red solid">
<div class="content-sidebar-r"style="min-height:250px; border:1px black solid"></div>
<div class="content-sidebar-l" style="min-height:250px; border:1px yellow solid"> </div>
<div class="content" style="min-height:250px; border:1px green solid"></div>
</div>​

jsFiddle example

You need to float your sidebar to the right first, otherwise by placing it last it can't float up above an element before it that is also floated.

CSS float: right; not working

When your use float:right; on an element, it moves to right of the parent, NOT to the right of page. In above case it indeed moved to the right of parent, it looked like it didn't worked as expected cause parent, i.e UL element has that much width only.

Note that by default UL is not a block level element, thus it wont span over entire available lenght but exapand according to it's children, also you used float left on parent of UL, which cause it to float to left, floated elements, whether block level or not, do not occupy entire length, instead exand as per its children same an inline-block elements!

Remove float from wrapper div & make UL block level, then your float:right will work as expected!

As follow:

HTML

<div id="left-align">
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Registered With</a></li>
    <li><a href="#">Social</a></li>
    <li style="float: right;"><a class="active" href="#">Regsiter</a></li>
  </ul>
</div>

CSS

#left-align {
    /* Remove float */
    position: relative;
    bottom: 300px;
}

ul {
    display:block;
    padding:0;
}

#page-wrap-header {
     /* removed width */
     margin: 0 auto;
     text-align: left;
}

Due to width on #page-wrap-header it was going outside window bounds, thus I removed it. you can tweak it later as per your need.

See DEMO : jsFiddle link

After float: left and float: right clear: both?

clear:left Is a keyword indicating that the element is moved down to clear past left floats.

Since you have a float: right right after float: left, if you only use clear: right your element will appear under the header, because you cleared the last floating object.

If you use clear: left, you will clear the left floating element, but not the right one, so the next elements will appear under the left floating one.

So in this case, if you use clear: both, you would be doing the same as doing clear: right.

clear: both is used so no floating elements are on either side of the new element, which is not what you're doing.

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Float: Right Not Working

You are using position:absolute; as well as floats for the same elements. Try using just floats.

DEMO

---

Related Topics