How to Keep CSS Floats in One Line

How do I keep CSS floats in one line?

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.

Keep floating divs on same line

This is one common way of doing what you want:

.wrap {
    position: relative;
    margin: 5px;
    border: 1px solid red;
}
.left {
    float: left;
    background-color: #CCC;
    margin-right: 48px;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    background-color: #888;
}

Explanation:

The fluid left column fills the whole width but saves space for the right column with margin-right: [right column width];
The fixed right column is placed at an absolute position at top 0, right 0 (its correct place)
The wrap div is assigned position: relative so the right column position is determined according to it.

Float: left; Alternative for making divs in one line?

Setting the display property to flex will allow the items to sit in one line as long as the are not too wide.

.portfolioWrapper {  display:flex;  justify-content: space-around; }

        <div id="Portfolio">            <div class="portfolioWrapper">
                <a class="portfolioLink" href="#">                <div class="portfolioProject">                    <h4>Sample Project</h4>                </div>                </a>
                <a class="portfolioLink" href="#">                <div class="portfolioProject">                    <h4>Sample Project</h4>                </div>                </a>
                <a class="portfolioLink" href="#">                <div class="portfolioProject">                    <h4>Sample Project</h4>                </div>                </a>
            </div>        </div>

Prevent floats from creating new line

Just float the image, and the text will align to the right.

.wrapper img {
    float:left;
}

The fiddle.

Keep element on one line, below the float if necessary

You should make the pair element to be inline-block because by default a block element will get overlapped by a floated element unlike inline level element that will wrap around floated element.

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.^ref

h2 {  margin: 0;}
.outer {  border: solid;  resize: horizontal;  overflow-x: auto;  padding-bottom: 20px;}
.right {  float: right;  width: 100px;  height: 50px;  background: red;}
.pair {   /*white-space: nowrap; not needed*/   display:inline-block;}
.pair > * {  display: inline-block;  margin: 0 2px;  padding: 2px;  background: lightGreen;}

<div class="outer">  <div class="right"></div>  <h2>A Heading</h2>  <div class="pair">    <div>This is a box</div>    <div>This is a wide box</div>  </div></div>

Keep floated elements in one line within table cell

You can set positive right margin to the anchor and negative left margin to the span:

.nowrap > a {
    margin-right: 30px;
}

.nowrap > span {
    margin-left: -30px;
}

Look how it works: http://jsfiddle.net/ZF8mh/