Q: How to prevent div become two rows? I have a web page which has two divs in one line. However, some times they become two lines, when the content is too long to display. My css is as follow:
.bubble{
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0px 0px 6px #B2B2B2;
    height: auto;
    margin: 10px;
    padding: 5px;
    width: auto;
    float: left;
    word-break: break-all;
    overflow:hidden;    
}

And here's the html:
<div class="bubble"></div>
<div class="bubble"></div>

How can I make it always in one line? Thanks

A: Instead of using float to cause your divs to be side-by-side, make the two divs display:inline-block, and make their parent container have white-space:nowrap. Then they will behave like two normally-inline elements, such as <span> or <img>.
Alternatively (as well-suggested by @frozenkoi) use display:table-row on the container and display:table-cell on the divs (or some other legal combination).

A: width:auto will make the width of the div equal to the content of the divs. When the content is too long for one line, it will bump them to two lines. To make them always on one line, you can do something like width:50%;, max-width:50% or width: somevalue where somevalue is less than or equal to half the parent's width. 
If you wish to have both of the divs have an adjustable width that is always a single line, you could use a smidge of JavaScript. This assumes that you have one div that is dynamic and the other that will "fill", and that you are using jQuery:
$(document).ready(function(){
    var parent_width = SOME_VALUE;
    var primary_width = $('.bubble.primary').width();
    var secondary_width = parent_width - primary_width;
    $('.bubble.secondary').css('width', secondary_width);
});


A: Generally, it is not considered good practice to rely on DIV to segment markup that must be rendered in a single line. You should consider using two SPAN elements instead of two DIVs.
However if you really must, you can add CSS3 styles to your DIV to get it to 'behave like' a SPAN. Here's the CSS:
div.nowrap {
  display: inline;
  overflow: hidden;
  overflow-x: hidden;
  white-space: nowrap;
}

You'll also need to wrap both the DIV elements in an outer DIV. This is because the CSS styles will act upon each individual DIV and its contents, and the browser will treat them independently when computing its layout. So, the markup would look like:
<div id='outer' class='nowrap'>
   <div id='inner1' class='nowrap'>This is a very very long line.</div>
   <div id='inner2' class='nowrap'>This is another very very long line.</div>
</div>

Without an outer DIV, the browser may choose to "wrap" the two inner DIV elements when computing layout by deciding that they best fit on separate lines.
Detailed explanation:
Understand that display: inline will tell the browser to create a text-flow-like layout for this element rather than a block. 
Also note that the both overflow: hidden and overflow-x: hidden are needed to address overflow behaviour in the vertical and horizontal directions, respectively.
Finally, the appropriate word-wrap behaviour uses white-space: nowrap. The word-break attribute that you are specifying only relates to where a line might be wrapped and not whether it is wrapped.
See similar question here (for pre-CSS3).

A: Try something like this:
    <style>
    #a
    {
    position:relative;
    overflow:hidden;
    width:50%;
    float:left;
    }
    #b
    {
    position:relative;
    overflow:hidden;
    width:50%;
    float:right;
    }


 #container
    {
    position:relative;
    width:100%;
    }
    </style>
<div id=container>
    <div id="a" >
    <p>TEXT</p>
    </div>

    <div id="b"> 
    <p>TEXT</p>
    </div>
</div>


A: Use max-width or explicitly set the size of the width using percentage, em or fixed value.
Or you can enclose the content in p or span and adjust width size there.
