Questions tagged [css-float]

Positioning elements to the left or right of their containers using the CSS float attribute.

Adding float: left or float: right to an element pushes it as far as possible to the chosen side of the document flow. Multiple elements floated in the same direction will stack on top of each other. Floating is extremely useful for arranging elements on the page, but it is also liable to create several interesting layout problems. The clear property is a related attribute sometimes used to solve floating issues.

Floating to the Right - The Backwards Effect

When floating multiple elements to the right side of the document, you will have to list them in reverse order that you want them to appear. This occurs because the first element found in the document gets floated to the right first. The next one which gets floated to the right gets stacked on top of the previous element, stacking to the left. Each element after that stacks to the left on top of the others.

The backwards effect also partially extends to elements which are floated to the right on the same line with elements floated to the left. Any elements you want to float directly to the right of left-floated elements should be placed before those floated to the left. Otherwise, the right-floated elements may end up on the line below.

Removal from the Flow of the Document

One of the major issues developers tend to have is that floated elements get removed from the flow of the document. This means they do not take up any space at all, both vertically, and horizontally. Other elements will expand behind them and only text will wrap around them. Most notably, you will see floated content expanding down past the edge of its parent container. Take for example, a green container with a padding of 20px, which contains a red container that is floated to the left:

Floating example

Since the floated element does not actually take up any space, the parent container has a calculated height of 0, plus the 40px of padding (top and bottom), which creates this adverse effect. Fixing this is simple, though. You can either add overflow: hidden to the parent container (which will work in most cases) or use a clear fix on the parent element (for CSS3-compatible browsers only).

.parent::after {
    content: "";
    clear: both;
    display: block;
    font-size: 0;
}

See the pseudo-element tag wiki for more information after the ::after selector.

Clearing Floated Elements

You can clear elements which are floated to the left, right, or both sides. Keep in mind that clearing floated elements will clear all elements to the specified sides (s). You cannot only clear one or two elements at a time with this property. Also, you should keep in mind that it will only affect those elements which are actually floated in that direction. In the case where an element floated to the left is stacked between two other elements floated to the left, you cannot apply a clear: right to that element to clear the left-floated element which is stacked to its right.

References

Additional Information

5944 questions
68
votes
6 answers

Floating Div Over An Image

I'm having trouble floating a div over an image. Here is what I am trying to accomplish: .container { border: 1px solid #DDDDDD; width: 200px; height: 200px; } .tag { float: left; position:…
Jeremy Harris
  • 24,318
  • 13
  • 79
  • 133
65
votes
6 answers

Div side by side without float

How can I make div 'left' and 'right' look like columns side by side? I know I can use float:left on them and that will work... but on step 5 and 6 in here http://www.barelyfitz.com/screencast...s/positioning/ the guy says it is possible, I can't…
Praneel PIDIKITI
  • 18,677
  • 13
  • 41
  • 60
63
votes
7 answers

CSS: Force float to do a whole new line

I have a bunch of float: left elements and some are SLIGHTLY bigger than others. I want the newline to break and have the images float all the way to the left instead of getting stuck on a bigger element. Here is the page I'm talking about : link If…
Paul Tarjan
  • 48,968
  • 59
  • 172
  • 213
61
votes
4 answers

CSS non-wrapping floating divs

I need to create a single line containing a variable amount of (floating?) divs: the container dimension is fixed, and it is supposed to add an horizontal scrollbar when needed, never wrapping. I tried the following, but it doesn't work: it wraps…
o0'.
  • 11,739
  • 19
  • 60
  • 87
60
votes
9 answers

No newline after div?

Is there a way to not have a newline inserted before a div without using float: left on the previous element? Maybe some tag on the div that will just put it to the right?
Oliver
  • 2,182
  • 5
  • 24
  • 31
59
votes
8 answers

Creating CSS3 Circles connected by lines

I have to implement the following circle and line combination in CSS and I am looking for pointers on how to implement this effectively. The circles and lines should look like this: I am able to implement the circles as such: span.step { …
HGandhi
  • 1,586
  • 2
  • 14
  • 27
58
votes
2 answers

Bootstrap change div order with pull-right, pull-left on 3 columns

I’ve been working on this the whole day but don’t come up with a solution. I have 3 columns in one row in a container. 1: right content – pull-right 2: navigation – pull-left 3: main content What it looks on big…
user2982964
  • 583
  • 1
  • 5
  • 4
58
votes
8 answers

How to horizontally center a floating element of a variable width?

How to horizontally center a floating element of a variable width? Edit: I already have this working using a containing div for the floating element and specifying a width for the container (then use margin: 0 auto; for the container). I just wanted…
Waleed Eissa
  • 10,283
  • 16
  • 60
  • 82
54
votes
5 answers

Firefox float bug? How do I get my float:right on the same line?

I have the following fiddle: http://jsfiddle.net/q05n5v4c/2/ In Chrome, it renders just fine. The chevron is on the right side. However, in Firefox, it drops the Chevron down 1 line. I've searched google and found several posts about this bug,…
Scottie
  • 11,050
  • 19
  • 68
  • 109
51
votes
6 answers

Aligning two divs side-by-side

I have a small problem. I am trying to align two divs side by side using CSS, however, I would like the center div to be positioned horizontally central in the page, I achieved this by using: #page-wrap { margin 0 auto; } That's worked fine. The…
Ronnie
  • 1,053
  • 5
  • 18
  • 30
51
votes
2 answers

Fixed width div on left, fill remaining width div on right

I want a div with a fixed width image on the left and a variable width div with a background color, which should extend its width 100% on my device. I can't stop the second div from overflowing my fixed div. When I add overflow:hidden at the…
Anamaria Miehs
  • 521
  • 1
  • 4
  • 10
50
votes
2 answers

How to vertically align floating divs to the bottom?

Because examples rule: http://jsfiddle.net/rudiedirkx/wgue7/ How do I get the bars to the bottom instead of the top? Now they're sticking to the top of the container (#bars) but I want them sticking to the bottom. As you can see, I don't know the…
Rudie
  • 52,220
  • 42
  • 131
  • 173
50
votes
5 answers

Bootstrap - floating navbar button right

I'm using the bootstrap navigation bar, but I want to float one of the buttons to the right instead of the left as it already is. Here's the HTML:
47
votes
3 answers

Bootstrap 3 Multi-column within a single ul not floating properly

I have been encountering problems like this on the current bootstrap 3 for a while now. I have managed to fix them in the past in one way or another but have no clue of how to fix it this time. I need to create two columns out of one ul by…
davidetucci
  • 471
  • 1
  • 4
  • 3
47
votes
2 answers

CSS text ellipsis when using variable width divs

I'm wondering if there is any way do have text in a floating div gain ellipsis when the parent div and neighboring div don't allow enough room. For example: