Html Question posted in
Some basic documentation can be found here.

Html – I Want Two Boxes Side By Side

What am I doing wrong?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#plate {
  height: 100%;
  width: 750px;
  margin: 10px auto;
}

.sidebar {
  border-radius: 25px;
  background: rgba(214, 245, 245, 0.7);
  text-align: center;
  align-items: center;
  
  float: left;
  width: 30%;
  
  border: 15px;
  padding: 10px; 
}

.meat {
  border-radius: 25px;
  background: rgba(242, 217, 230, 0.7);
  
  float: left;
  width: 90%;
  
  margin: 10px;
  border: 15px;
  padding: 10px;
 }
Tags:

2

Answers


  1. 0

    You can use css’s Flexbox

    Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces.

    #plate {
  height: 100%;
  width: 750px;
  margin: 10px auto;
  display: flex; /* <-- add this */
}
    Login or Signup to reply.
  2. 0

    To make two boxes side by side with floats, apply float: right to the sidebar.

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  #plate {
    max-width: 700px;
    margin: 20px auto;
    overflow: hidden; /* Clearfix */
  }

  .sidebar {
    float: left;
    width: 40%;
    padding: 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 8px;
    background-color: #f0f0f0;
  }

  .meat {
    float: right;
    width: 60%;
    padding: 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 8px;
    background-co
    <div id="plate">
  <div class="sidebar">
    <h2>Sidebar</h2>
    <p>This is the content of the sidebar.</p>
  </div>
  <div class="meat">
    <h2>Meat</h2>
    <p>This is the content of the meat.</p>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search