Question

My css:

#main {
  display: block;
  top: 0px;
  bottom: 0px;
  height: auto;
  margin-top: 55px;
  max-width: 100%;
  overflow: scroll;
  position: absolute;
}

#content {
  background-color: #fff;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #eee;
  -moz-box-shadow: inset 0 0 5px #000;
  -webkit-box-shadow: inset 0 0 5px #000;
  box-shadow: inset 0 0 5px #000;
  margin: 5px;
}

What i want:

What i get:

Red = absolute header
White = #main with “blue” scrollbars
Green = #content border with the text in it.

I guess it is quite easy to solve but i still couldnt manage after trying for ages 😛

Updated/simplified jsfiddle:
http://jsfiddle.net/YAgW2/9/

Answer 1

Adding float: left; to #content solves the display issue!