My CSS Notes - Layout Part 1

> How to line up inline elements in one line without wrapping. Note: it will force the container expand and scroll bars may appear.

.container {
   white-space: nowrap;
   display: table-cell;
}

Here is an exmaple

> How to line up elements in one line without wrapping but truncate the "middle" element when the container doesn't have enough space.

Solution 1 using relative position.

.container {
 border: 2px solid black;
 margin: 2px;
 padding: 4px;
 position: relative;
}
.icon {
 float: left;
}
.icon2 {
 float: right;
}
.middle {
 background-color: aqua;
 position: absolute;
 left: 20px;
 right: 20px;
 overflow: hidden;
}
.text {
 white-space: nowrap;
}
<div class="container">
   <img alt="icon" src="add.gif" class="icon"/>
   <div class="middle">
      <span class="text">Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello</span>
   </div>
   <img alt="icon" src="add.gif" class="icon2"/>
   <div style="clear: both;"></div>
</div>

Here is an example

Solution 2 using margin.

.container {
 border: 2px solid black;
 margin: 2px;
 padding: 4px;
}
.icon {
 float: left;
}
.icon2 {
 float: right;
}
.middle {
 background-color: aqua;
 overflow: hidden;
}
.text {
 white-space: nowrap;
}
<div class="container">
   <img alt="icon" src="add.gif" class="icon"/>
   <img alt="icon" src="add.gif" class="icon2"/>
   <div class="middle">
      <span class="text">Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello</span>
   </div>
</div>

Here is an example


> How to line up elements but allow the "middle" element to wrap around and expand the container height.

.container {
 border: 2px solid black;
 margin: 2px;
 padding: 4px;
}
.icon {
 float: left;
}
.icon2 {
 float: right;
}
.middle {
 background-color: aqua;
 margin: 0 20px;
}
<div class="container">
   <img alt="icon" src="add.gif" class="icon"/>
   <img alt="icon" src="add.gif" class="icon2"/>
   <div class="middle">Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello</div>
</div>

Here is an example