#357951 Is this correct approach showing to put two Divs side by side in vf page?

 Realistically, no. A modern VF page should not do this. The preferred design would be to use the appropriate tags for this:

Left Side Content Right Side Content

You can place the additional code you have within those sections as appropriate.

• Here we have 5 ways to put two divs side by side:
  
• display: inline-block (tradional way)
  
• css flexbox method
  
• css grid method
  
• display: table method
  
• float property
  

  [mc4wp_form id=“314”]

1.Using display: inline-block

Using display: inline-block property you can place block element beside each other. But, for that you need to add extra width property to the block element because block element by default takes 100% width.

eg.

// css

.element {

  display: inline-block;

  width: 100px;

  height: 100px;

  background: #ce8888;

}

and output will be

please check example here

Using flexbox

flexbox is a modern way of designing the layout of a webpage and can be used to put two divs side by side. Flexbox is not a single property its a complete module it has a number of features

let's see how you can align divs next to each other using flexbox

//html file

// css file

.container {

  display: flex;

}

.item {

  background: #ce8888;

  flex-basis: 100px;

  height: 100px;

  margin: 5px;}

//output

display: flex property given to container which makes child element in flex context and aligns divs next to each other.

Using css grid

CSS grid is another great approach to put two divs side by side. Property display: grid turns on the grid layout structure and CSS grid-template-columns property helps to divide the page into a number of columns, we have given 100px two times then it will create two columns Let's see how we can display two divs side by side using css grid

//html

  

    Grid Example  



//css file

.container {

        display: grid;

        grid-template-columns: 100px 100px; 

        grid-template-rows: 100px;

        grid-column-gap: 5px;

      }

      .item {

      background: #ce8888;

      }

and output will be

4.Using display table

display: table property is an alternative for

tag that can be used to put two divs side by side. let's see how we can achieve dispaying two div side by side using display: table property.

//html file



//css file

.container {

  display: table;

  width: 20%;

}

.table-row {

  display: table-row;

  height: 100px;

}

.table-cell {

  border: 1px solid;

  background: #ce8888;

  display: table-cell;

  padding: 2px;

}

and output will be

you can code above display: table example using html table tag also like below

//html file





    





  

    

     

      

    

  

      

      

  



//css file

.container {

  display: table;

  width: 20%;

}

.table-row {

  display: table-row;

  height: 100px;

}

.table-cell {

  border: 1px solid;

  background: #ce8888;

  display: table-cell;

  padding: 2px;

}

and output will be

5. Using float property

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. let's see how we can display two divs side by side using the float property.

//html file







//css file

.element {

  float: left;

  width: 100px;

  height: 100px;

  background: #ce8888;

  margin: 5px

}

and output will be