Can I combine position: relative and float: left?

Question

Can I apply both position: relative and float: left on one element? Like this:

div {
  float: left;
  position: relative;
  top: 0px;
          


        

Answer 1

The answers that claim that you can combine float and position are actually incorrect. Yes, the position of the floating div will indeed move, but the surrounding text will not flow as you expect. The problem is that the position attributes effectively leave a white box where the div that you're floating used to be, then moves the div elsewhere, leaving the box behind. Put another way, you'll be positioning your div on top of the text, when what you probably want is for the text to flow around the div in its new position.

Here's an example of a div that has a simple float:right

Here's an example of the same div, but with position:relative; and top:.75in; added:

Note how the box is now sitting on top of the text. That's probably not what you want!

Answer 2

Yes, You can use both.

You will use float:left to position element to left side and permit next element to position right side of this.

position:relative will affect itself and it's children, to take own position. when you will use left:npx;top:npx it will move this element left,right,top and bottom.

You can check this demo: jsfiddle link

Answer 3

I want to provide a different answer in case it may help someone. I had two side by side div's that I wanted them to take up space:

<div class="col-md-12">
    <div class="col-md-6">stuff</div>
    <div class="col-md-6">other stuff</div>
</div>

I used to do this by applying <div class="clear"></div> after all my floating ones. This used to work because .clear { clear: both; } would solve the problem. This no longer works for me. Instead, I followed these instructions and added this class to my container:

.noFloat {
    width: 100%;
    overflow: auto; //If you get a scroll bar, try overflow: hidden;
    float: none;
}

so I ended up with:

<div class="col-md-12 noFloat">...</div>

Here is a link to a bootply.com example: http://www.bootply.com/EupCHRhV4s

Answer 4

Could I apply position relative and float left on one element?

Yes. Try it out.

Answer 5

Yes.

CSS2.1, 9.4.3:

"Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning"