좌우배치를 하는 다양한 방법 (float, display:table, flex)

1. float:left / float:right

 

제일 기본적인 방법.

block 속성의 박스를 inline 속성으로 바꿔 좌우 배치하는 방법 

 

<div class="container">

  <div class="aside"></div>

  <div class="section"></div>

</div>

 

.container {width:100%}

.aside {width:200px;height:500px;background:#f00;float:left;}

.section {width:calc(100%-200px);height:500px;background:#f0f;float:right}

 

 

 

 

 

2. display:table / display:table-cell

 

부모와 자식의 구조를 table 형식으로 바꿔주는 css 로 table 태그의 단점인 모바일 기기에 호환되지 않는 점을 보완한 방법

 

.container {display:table;width:100%;}

.container .aside {background:#777;width:200px;display:table-cell;}

.container .section {background:#88deed;display:table-cell;}

 

 

 

 

 

3. display:flex / flex:1

 

자유로운 배치가 가능하며 기능적으로 우수하나 호완성의 문제가 있다 (ie10부터 지원)

 

.container {width:1200px;margin:0 auto;display:flex;} /* 부모에게 고정된 width값을 주지 않으면 전체에 채워짐 */

.container .aside {width:200px;background:#777;} /* width 값을 변경해도 깨짐없이 채워진다. */

.container .section {background:#88deed;flex:1;}

 

 

 

 

 

 

 

 

 

 

www.w3schools.com/cssref/pr_class_display.asp

CSS display property