CODEWITHSUNDEEP
htmlcss
River CR Phoenix
River CR Phoenix

Reputation: 311

float right element outside of parent

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.

fiddle 

#boards {
  width: 100%;
  height: 500px;
  background-color: white;
  text-align: center;
}
#boards p {
  font-family: 'bebas_neueregular';
  color: rgba(160, 224, 247, 1);
  margin-top: 30px;
  font-size: 50px;
}
.board_items {
  width: 250px;
  height: 300px;
  background-color: gray;
}
#board_items_container {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  background-color: orange;
  padding: relative;
}
#board1 {
  float: left;
  padding: relative;
}
#board2 {
  margin-left: auto;
  margin-right: auto;
  padding: relative;
}
#board3 {
  float: right;
  padding: relative;
}
<div id="boards">
  <p>TOP BOARDS</p>
  <div id="board_items_container">
    <div id="board1" class="board_items">
    </div>
    <div id="board2" class="board_items">
    </div>
    <div id="board3" class="board_items">
    </div>
  </div>
</div>

Upvotes: 4

Views: 2331

Answers (2)

ilgaar
ilgaar

Reputation: 844

Try the following css code:

#board1 {
    display: inline-block;
    float: left;
    position: relative;
}
#board2 {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
#board3 {
    display: inline-block;
    float: right;
    position: relative;
}

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92983

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

<div id="boards">
  <p>TOP BOARDS</p>
  <div id="board_items_container">
    <div id="board1" class="board_items"> <!-- float: left -->
    </div>
    <div id="board3" class="board_items"> <!-- float: right -->
    </div>
    <div id="board2" class="board_items"> <!-- not floated -->
    </div>
  </div>
</div>

Upvotes: 4

Related Questions