HTML에서 두 개의 div 요소를 수평(가로 방향)으로 나란히 정렬하려면 CSS의 float 속성을 사용하면 됩니다. 각 div에 float: left; 값을 지정하면 두 요소가 왼쪽부터 차례대로 가로 방향으로 배치됩니다.
예제: float 속성으로 div 수평 정렬하기
아래 코드를 실행하면 두 개의 div가 화면에서 좌우로 나란히 정렬되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo div {
float: left;
clear: none;
}
</style>
</head>
<body>
<div class="demo">
<div>
<span>div1</span>
<select size="5">
<option value="c1">India</option>
<option value="c2">US</option>
<option value="c3">UK</option>
<option value="c4">Australia</option>
</select>
</div>
<div>
<span>div2</span>
<select size="5">
<option value="r1">1</option>
<option value="r2">2</option>
<option value="r3">3</option>
<option value="r4">4</option>
</select>
</div>
</div>
</body>
</html>float 사용 시 주의사항
float 속성은 자식 요소가 일반적인 문서 흐름에서 벗어나기 때문에, 부모 요소의 높이가 0으로 무너지는 현상이 발생할 수 있습니다. 이 경우 부모 요소에 overflow: hidden;을 지정하거나 clearfix 기법을 적용하면 해결할 수 있습니다.
더 나은 방법: Flexbox 활용하기
최근 웹 개발에서는 float보다 Flexbox를 사용하는 것이 권장됩니다. 부모 컨테이너에 display: flex; 한 줄만 추가하면 자식 div들이 자동으로 수평 정렬됩니다.
.demo {
display: flex;
}Flexbox는 요소 간 간격 조절(gap), 세로 중앙 정렬, 반응형 레이아웃 구성 등을 훨씬 직관적으로 처리할 수 있어 유지보수 측면에서도 유리합니다.