It is necessary to display the blocks #main div horizontally, so as not to transfer to the new line, if reached the limit width of the block #main .

I tried float: left; display: inline-block;

1, Authority 100%

HTML

& lt; div id = "main" & gt;
    & lt; div & gt; & lt; / div & gt;
    & lt; div & gt; & lt; / div & gt;
    & lt; div & gt; & lt; / div & gt;
    & lt; div & gt; & lt; / div & gt;
  & lt; / div & gt;

css

& lt; style & gt;
  * {
    margin: 0px;
    Padding: 0px;
  }
  html, body {
    HEIGHT: 100%;
  }
  Body {
    Background-Color: #CCC;
  }
  Div {
    border: 1px solid #fff;
    margin: 10px;
    Text-Align: Center;
  }
  #main {
    width: 1119px;
    Height: 150px;
    Overflow: Hidden;
  }
  # Main & gt; div {
    width: 150px;
    height: 120px;
    Display: INLINE-BLOCK;
  }
  & lt; / style & gt;

Example

2

Is not it easier for all three blocks to set the width and height and then just add all float: left

3

It is very easy: the blocks display: inline-block; Parent white-space: nowrap; . Thus, we do not permit the transfer of lines.