가변적인 높이의 float 요소가 2개가 있을 경우 높이를 동일하게 맞추는 CSS 코드에 관해 알아보겠습니다.

최종 결과

See the Pen adjust float left colums by chazwize (@chazwize) on CodePen.

좌측과 우측이 컨텐츠 높이가 다름에도 동일한 높이를 차지하도록 설정되었습니다.

예시에서는 2개의 요소를 기준으로 하였지만 3, 4, 5 column 까지도 가능합니다.
( CSS 의 left, right 값을 조절해주면 됩니다. )

자 그러면 하나하나 과정을 살펴보죠.


1. 기본 float 처리

See the Pen float-columns-step1 by chazwize (@chazwize) on CodePen.

기본적인 container 와 column 2개를 배치하고, 각각 배경색을 설정했습니다.

기본적으로 float 설정시 부모 요소의 높이는 float 설정된 자식 요소의 높이에 영향을 받지 않아 정상적으로 높이값이 설정되지 않습니다.


2. container2 div 추가

See the Pen float-columns-step2 by chazwize (@chazwize) on CodePen.

기존 container 를 감싸는 div 를 추가합니다. ( container2 )

그리고 container2 를 float 처리 해줍니다.

기존 col1, col2 에 설정되어있던 배경 색상은 제거하고 container1, container2 에 배경 색상을 적용해줍니다.


3. container 1 div 위치 이동

See the Pen float-columns-step3 by chazwize (@chazwize) on CodePen.

container2 를 보이게 하기 위해 container1 요소의 position 및 right 속성을 추가해줍니다.

right 속성이 적용됨으로 인해 밑에 깔려있던(?) container2가 보이게됩니다.
( right 값 만큼 좌측(<<) 으로 container 가 밀려난다고 생각하시면 됩니다. )


4. container 의 콘텐츠 요소 ( column1, column2 ) 이동

현재까지 컨텐츠요소 column1, column2 는 container1 에 right 속성값지정에 따라서 좌측(<< )으로 밀려난 상태입니다. 
( 화면에 보이지 않는 영역으로 이동되었습니다. )

이제 해당 요소들이 밀려난만큼 우측(>>)으로 밀어줘서 원래 위치로 되돌아오도록 설정하겠습니다.

See the Pen float-columns-step4 by chazwize (@chazwize) on CodePen.

우선 container2 에 overflow, position 속성을 추가합니다.

그리고 col1, col2에 position, left 속성을 추가( container의 right 설정값만큼 )해주면 col1, col2 가 원래 위치로 돌아오게 됩니다.


5. column 에 padding 적용하기

이 단계는 추가적인 팁이라 할 수 있을것 같은데요.

column 에 css 의 padding 속성을 이용할 경우 브라우저별로 다른 결과가 나올 수 있습니다.

그래서 브라우저별로 동일하게 동작할 수 있는 방법을 사용하는게 좋은데요.

바로 width (넓이)값과 left (위치) 값을 이용해서 padding 과 유사한 효과를 주는것입니다.

코드를 보시죠.

See the Pen float-columns-step5 by chazwize (@chazwize) on CodePen.

padding 속성대신 column 요소의 넓이를 좌우 padding 합계 만큼 감소시키고

감소된 width 값만큼 left 값을 증가시켜줍니다.

( 여기서 첫번째 column 은 좌측에 요소가 없으므로 양측이아닌 한쪽의 padding 값 만큼만 left 값을 증가시켜줍니다. )

padding 보다는 복잡하지만 어렵지 않게 동일한 효과를 낼 수 있습니다.

감사합니다. 👻