217

I want to have two items on the same line using float: left for the item on the left.

I have no problems achieving this alone. The problem is, I want the two items to stay on the same line even when you resize the browser very small. You know... like how it was with tables.

The goal is to keep the item on the right from wrapping no matter what.

How to I tell the browser using CSS that I would rather stretch the containing div than wrap it so the the float: right; div is below the float: left; div?

what I want:

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /
double-beep
  • 5,031
  • 17
  • 33
  • 41
Jiaaro
  • 74,485
  • 42
  • 169
  • 190
  • 56
    How cool would it be if StackOverlow added a little drawing widget so we could make these diagrams with the mouse? Might be more appropriate for design-oriented SE sites... but it would be awesome nevertheless. – JoeCool Nov 08 '12 at 20:19
  • 5
    @JoeCool The UX SE site actually has a tool to create mockups in it, already. http://meta.ux.stackexchange.com/questions/1291/how-do-i-add-mockups-and-or-visuals-to-my-questions – frank hadder Jun 05 '13 at 17:51

10 Answers10

133

Another option is, instead of floating, to set the white-space property nowrap to a parent div:

.parent {
     white-space: nowrap;
}

and reset the white-space and use an inline-block display so the divs stay on the same line but you can still give it a width.

.child {
    display:inline-block;
    width:300px;
    white-space: normal;
}

Here is a JSFiddle: https://jsfiddle.net/9g8ud31o/

Inserve
  • 1,796
  • 1
  • 12
  • 14
  • 4
    Definitely the best solution I've seen. It works for my use case but I wonder how well it's supported. Fortunately using floats for EVERYTHING is slowly becoming a thing of the past. – Ryan Ore Feb 22 '13 at 17:49
  • 1
    Can you explain how this works? or any links atleast? – Anirudhan J Feb 27 '14 at 12:16
  • 4
    @AnirudhanJ It's not too difficult. Inline-block makes the elements flow normally with inline text (but retains some of the padding/margin abilities of the block), and you *literally* just tell the CSS not to wrap the text with the white-space: nowrap option (applying "normal" again to the child, to avoid it propagating down into everything) – Brian Feb 28 '14 at 21:02
  • How do you get the div on the right to float to the right of the screen, though? This just puts two inline-blocks next to each other that won't line break. – addMitt Mar 15 '16 at 18:16
  • you can also use **letter-spacing: -3px** (or whatever value works for you) to remove the space between the inline-block elements. PS: **better than the accepted answer**; – Claudiu Nov 04 '16 at 19:50
78

Wrap your floating <div>s in a container <div> that uses this cross-browser min-width hack:

.minwidth { min-width:100px; width: auto !important; width: 100px; }

You may also need to set "overflow" but probably not.

This works because:

  • The !important declaration, combined with min-width cause everything to stay on the same line in IE7+
  • IE6 does not implement min-width, but it has a bug such that width: 100px overrides the !important declaration, causing the container width to be 100px.
Eric Wendelin
  • 43,147
  • 9
  • 68
  • 92
  • This works great for two floats, but not three. Can it work for three?? – tylerthemiler Apr 14 '12 at 23:23
  • 16
    The only problem is it forces a fixed minimum width. – Matt Montag Jul 23 '12 at 18:25
  • 7
    This isn't a solution, it's just a min-width, when your content gets really small (see question) so below the 100px you have the same issue. Specially with table cells, this stays an issue. – Sanne Dec 21 '13 at 18:23
  • Absolutely shocking - solved my problem instantly. I have been wrangling with this problem in a simple two column bootstrap layout with more box hacks than I can name, but this worked perfectly. Thank you for the explanation of why this work - fascinating stuff, the dom is. – Shawn J. Molloy Aug 23 '14 at 19:12
  • This may work with divs, but I just tested it with ul/li and it doesn't work :( – AsGoodAsItGets Aug 28 '14 at 14:59
  • If the CSS standard were revised to eliminate the need for min/max size hacks, it would be a great day. – Andy Jul 31 '15 at 23:16
  • @MattM. not to mention it's not guaranteed to work for arbitrary-length content – Andy Jul 31 '15 at 23:17
  • wow when you have to rely on a bug to ensure crossbrowser compatibility, you know the protocol is time to be updated. – ahnbizcad Aug 06 '15 at 23:51
15

Wrap your floaters in a div with a min-width greater than the combined width+margin of the floaters.

No hacks or HTML tables needed.

Czar
  • 151
  • 1
  • 2
11

Solution 1:

display:table-cell (not widely supported)

Solution 2:

tables

(I hate hacks.)

pkario
  • 2,180
  • 6
  • 26
  • 30
8

Another option: Do not float your right column; just give it a left margin to move it beyond the float. You'll need a hack or two to fix IE6, but that's the basic idea.

Steve Clay
  • 8,671
  • 2
  • 42
  • 48
4

Are you sure that floated block-level elements are the best solution to this problem?

Often with CSS difficulties in my experience it turns out that the reason I can't see a way of doing the thing I want is that I have got caught in a tunnel-vision with regard to my markup ( thinking "how can I make these elements do this?" ) rather than going back and looking at what exactly it is I need to achieve and maybe reworking my html slightly to facilitate that.

glenatron
  • 11,018
  • 13
  • 64
  • 112
  • well it works for just about everything and the existing layout is based on it, I'm just trying to fix a problem with the layout breaking when you increase the text size too much OR resize the browser window smaller than 700px wide – Jiaaro Nov 05 '08 at 18:15
2

i'd recommend using tables for this problem. i'm having a similar issue and as long as the table is just used to display some data and not for the main page layout it is fine.

Rob Elliott
  • 37
  • 1
1

Add this line to your floated element selector

.floated {
    float: left;
    ...
    box-sizing: border-box;
}

It will prevent padding and borders to be added to width, so element always stay in row, even if you have eg. three elements with width of 33.33333%

Nebojsha
  • 381
  • 2
  • 10
0

When user reduces window size horizontally and this causes floats to stack vertically, remove the floats and on the second div (that was a float) use margin-top: -123px (your value) and margin-left: 444px (your value) to position the divs as they appeared with floats. When done this way, when the window narrows, the right-side div stays in place and disappears when page is too narrow to include it. ... which (to me) is better than having the right-side div "jump" down below the left-side div when the browser window is narrowed by the user.

Bruce Allen
  • 191
  • 2
  • 7
-3

The way I got around this was to use some jQuery. The reason I did it this way was because A and B were percent widths.

HTML:

<div class="floatNoWrap">
    <div id="A" style="float: left;">
        Content A
    </div>
    <div id="B" style="float: left;">
        Content B
    </div>
    <div style="clear: both;"></div>
</div>

CSS:

.floatNoWrap
{
    width: 100%;
    height: 100%;
}

jQuery:

$("[class~='floatNoWrap']").each(function () {
    $(this).css("width", $(this).outerWidth());
});
ScubaSteve
  • 7,724
  • 8
  • 52
  • 65
  • 1
    A framework for CSS? I have to -jquery for *ALL* JavaScript searches and because of a complete and utter disregard for quality we have to start explicitly searching for CSS with -jquery too? Do it right or don't do it at all. – John Apr 04 '15 at 20:34