JavaScript Arranging 4 divs parallel vertically using html css

I'm trying since 4 hours to arrange 4 div side by side vertically.Those div are also having 2 div inside it,for image and paragraph.I'm able to arrange the 4 image div next to each other but paragraph div is difficult to align.

Code I'm using:

.left4 {
  width: 215px;
  float: left;
}
.center4 {
  float: left;
  width: 215px;
  padding-right: 50px;
  padding-left: 50px;
}
.center4.1 {
  width: 215px;
  float: right;
  padding-left: 10px;
  float: left;
}
.right4 {
  width: 215px;
  float: left;
  padding-left: 40px;
}
.image4 {
  height: 100px;
  width: 215px;
  border: 4px;
  border-style: double;
  border-color: #BABABA;
  float: left;
  margin-top: 10px;
}
.para1 {
  height: 200px;
  color: #BABABA;
}
<div class="4">
  <div class="left4">
    <div class="image4">
      <img>
    </div>
    <div class="para1">
      <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3>
      <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p>
      <p align="right"><a target='_blank' href="#" style="color:orange;text-decoration:none">Read More >></a>
      </p>
    </div>
  </div>
  <div class="center4">
    <div class="image4">
      <img>
    </div>
    <div class="para1">
      <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3>
      <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p>
      <p align="right"><a target='_blank' href="#" style="color:orange;text-decoration:none">Read More >></a>
      </p>
    </div>
  </div>

  <div class="center4.1">
    <div class="image4">
      <img>
    </div>
    <div class="para1">
      <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p>
      <p align="right"><a target='_blank' href="#" style="color:orange;text-decoration:none">Read More >></a>
      </p>
    </div>
  </div>


  <div class="right4">
    <div class="image4">
      <img>
    </div>
    <div class="para1">
      <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3>
      <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p>
    </div>
  </div>
Answer:1

You cannot use .center4.1. In CSS, It means you are trying to access multiple classes center4 and 1. Change it to .center4-1

.left4 {
   width: 215px;
   float: left;
 }
 .center4 {
   float: left;
   width: 215px;
   padding-right: 50px;
   padding-left: 50px;
 }
 .center4-1 {
   width: 215px;
   float: right;
   padding-left: 10px;
   float: left;
 }
 .right4 {
   width: 215px;
   float: left;
   padding-left: 40px;
 }
 .image4 {
   height: 100px;
   width: 215px;
   border: 4px;
   border-style: double;
   border-color: #BABABA;
   float: left;
   margin-top: 10px;
 }
 .para1 {
   height: 200px;
   color: #BABABA;
 }
<div class="4">
  <div class="left4">
    <div class="image4">
      <img>
    </div>
    <div class="para1">
      <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3>
      <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p>
      <p align="right"><a target='_blank' href="#" style="color:orange;text-decoration:none">Read More >></a>
      </p>
    </div>
  </div>
  <div class="center4">
    <div class="image4">
      <img>
    </div>
    <div class="para1">
      <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3>
      <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p>
      <p align="right"><a target='_blank' href="#" style="color:orange;text-decoration:none">Read More >></a>
      </p>
    </div>
  </div>

  <div class="center4-1">
    <div class="image4">
      <img>
    </div>
    <div class="para1">
      <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p>
      <p align="right"><a target='_blank' href="#" style="color:orange;text-decoration:none">Read More >></a>
      </p>
    </div>
  </div>


  <div class="right4">
    <div class="image4">
      <img>
    </div>
    <div class="para1">
      <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3>
      <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p>
    </div>
  </div>
Answer:2

I puuting some basic concept how you can do this.It will work in all size

HTML

<div id="container">
    <div class="box">
        <div class="text">Text</div>
    </div>
    <div class="box">
        <div class="text">Text</div>
    </div>
    <div class="box">
        <div class="text">Text</div>
    </div>
    <div class="box">
        <div class="text">Text</div>
    </div>
</div>

CSS

  .box {
        background-color: coral;
        width: 30%;
        display:inline-block;
        margin:10px 0;
        border-radius:5px;
    }
    .text {
        padding: 10px 0;
        color:white;
        font-weight:bold;
        text-align:center;
    }
Answer:3

I have a js file with one $(document).ready.. block. Since there are many anonymous functions inside this block, I've decided to move them and create functions. The problem is that when I've changed ...

I have a js file with one $(document).ready.. block. Since there are many anonymous functions inside this block, I've decided to move them and create functions. The problem is that when I've changed ...

I'm working on a form which has both live and front end (javaScript) validation that displays quite nicely. But I also want to display the back end error message to the user for the rare cases the ...

I'm working on a form which has both live and front end (javaScript) validation that displays quite nicely. But I also want to display the back end error message to the user for the rare cases the ...

I am repeating a OBJECT to render UI. Each row has a ItemName and a checkbox. Onclick of checkbox I should get the ID of that row. When I Run the page I am getting this error msg => Cannot read ...

I am repeating a OBJECT to render UI. Each row has a ItemName and a checkbox. Onclick of checkbox I should get the ID of that row. When I Run the page I am getting this error msg => Cannot read ...

  1. javascript function not called onchange

Step by step i did these Create a new Facebook App (App ID: 544557495732050) Create a new Facebook Page (https://www.facebook.com/Pasha-electronic-502844156580479/) In App which created by step 1 ...

Step by step i did these Create a new Facebook App (App ID: 544557495732050) Create a new Facebook Page (https://www.facebook.com/Pasha-electronic-502844156580479/) In App which created by step 1 ...

  1. facebook comments mirroring
  2. facebook comment mirroring deprecated