#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

//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

Latest Salesforce Blogs

Guides, tips and career advice on Salesforce from JanBask experts.

Salesforce Entry-Level Salesforce Admin Salary: What Can You Expect to Earn? Curious what an entry-level Salesforce Admin actually earns? See real salary benchmarks by experience and location, plus how to… Oct 22, 2026 · 12 reads Read more → Salesforce Senior Salesforce Admin Salary: Salary Range, Factors & Career Growth What does a senior Salesforce administrator actually earn? See real salary ranges, the skills that boost pay, and how to move up… Oct 21, 2026 · 13 reads Read more → Salesforce Cost for Salesforce Certification: Exam Fees by Type, Retakes & Hidden Costs Salesforce certification exam fees run $75 to $4,500, and most cost $200. See cost by role, retakes, taxes, discounts, and… Oct 21, 2026 · 25 reads Read more → Salesforce Salesforce Admin Certification Cost 2026: Exam Fees, Retake & Other Expenses Learn the Salesforce Admin certification cost in 2026, including the exam fee, retake cost, taxes, discounts, preparation… Oct 21, 2026 · 27 reads Read more →

View all Salesforce blogs →