Float elements left and right inside of a parent

[Marius]

I have a parent div and three children. i want one to float left of parent, one to be in exact center of parent, and one to float right of parent. but the floated right element has gone outside of the parent div.
Its not because of lack of space.
Here is my code:
- CSS

Code: Select all

#board_container {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  background-color: orange;
  position: relative;
}
#board1 {
  float: left;
  position: relative;
}
#board2 {
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
#board3 {
  float: right;
  position: relative;
}

- HTML

Code: Select all

<div id="board_container">
  <div id="board1">Float to left</div>
  <div id="board2">Stay in center</div>
  <div id="board3">Float to right</div>
</div>

In your HTML, move the right-floated element before the element you want it to float around.

Code: Select all

<div id="board_container">
  <div id="board1">Float to left</div>
  <div id="board3">Float to right</div>
  <div id="board2">Not floated</div>
</div>