why is my <div3> and <div4> not side by side?-CodePudding

im trying to align the divs side by side and this is my first time using stack overflow so sorry if im doing something wrong

     <style>
     .div3{
       float: left;
       border: 3px solid-black;
       background-color:#D8BFD8;
       width:50%;
       padding-top:100px
       padding-bottom:100px;
       padding-left:0px;
       padding-right:0px;
  }

.div4{
    float: right;
    border: 20px #FFEFD5;
    background-color: #FFA07A;
      width:50%;
      padding-top:100px
      padding-bottom:100px;
      padding-left:0px;
     padding-right:0px;

}
}

CodePudding user response：

You can try it:

<style>
  .div3 {
    float: left;
    border: 3px solid-black;
    background-color: #D8BFD8;
    width: 50%;
    padding-top: 100px padding-bottom:100px;
    padding-left: 0px;
    padding-right: 0px;
  }

  .div4 {
    float: right;
    border: 20px #FFEFD5;
    background-color: #FFA07A;
    width: 50%;
    padding-top: 100px padding-bottom:100px;
    padding-left: 0px;
    padding-right: 0px;
  }
</style>

CodePudding user response：

hope you're doing great!

As you can see on the code bellow, I've used a very useful CSS tool, the flexbox, you can see this guide about it here.

I suggest you to read it, because you will feel much confident about you website customisation, and even reduce some line of codes, for instance, you could remove this width 50%, using the justify-content option.

<style>
  .div3 {
    border: 3px solid-black;
    background-color: #D8BFD8;
    width: 50%;
    padding-top: 100px padding-bottom:100px;
    padding-left: 0px;
    padding-right: 0px;
  }

  .div4 {
    border: 20px #FFEFD5;
    background-color: #FFA07A;
    width: 50%;
    padding-top: 100px padding-bottom:100px;
    padding-left: 0px;
    padding-right: 0px;
  }
  .div-wrapper {
    display: flex;
    justify-content: space-between;
  }
</style>

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>
    <div >
      <div  >CONTENT 1</div>
      <div  >CONTENT 2</div>
   </div>
  </body>
</html>