วิธีวาง div 2 ตัวติดกัน (Side by Side) ใน HTML/CSS

ใช้ CSS float: left หรือ Flexbox/Grid เพื่อวาง <div> 2 ตัวติดกันแนวนอน

วิธีที่ 1: Float (Legacy)

<!DOCTYPE html>
<html>
<head>
  <title>HTML div side by side</title>
  <style>
    .box { width: 100px; height: 100px; float: left; margin: 10px; }
    .clearfix::after { content: ""; display: table; clear: both; }
  </style>
</head>
<body>
  <div class="clearfix">
    <div class="box" style="background:gray;">First DIV</div>
    <div class="box" style="background:yellow;">Second DIV</div>
  </div>
</body>
</html>

วิธีที่ 2: Flexbox (Modern - แนะนำ)

<style>
  .flex-container { display: flex; gap: 20px; }
  .flex-item { width: 100px; height: 100px; }
</style>
<div class="flex-container">
  <div class="flex-item" style="background:gray;">First</div>
  <div class="flex-item" style="background:yellow;">Second</div>
</div>

วิธีที่ 3: CSS Grid

<style>
  .grid-container { display: grid; grid-template-columns: 100px 100px; gap: 20px; }
  .grid-item { height: 100px; }
</style>
<div class="grid-container">
  <div class="grid-item" style="background:gray;">First</div>
  <div class="grid-item" style="background:yellow;">Second</div>
</div>

Responsive Pattern (Flexbox)

.responsive-two-col {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.responsive-two-col > div {
  flex: 1 1 300px; /* grow, shrink, basis 300px */
  min-height: 200px;
}

บนมือถือจะซ้อนกันเองเมื่อหน้าจอแคบกว่า 600px

คำแนะนำ

• Flexbox แนะนำสำหรับ 1D layout (side-by-side)
• ใช้ gap แทน margin (cleaner)
• เพิ่ม flex-wrap: wrap สำหรับ responsive
• หลีกเลี่ยง float ในโปรเจกต์ใหม่