[HTML/CSS] 가변폭 레이아웃

위의 레이아웃은 브라우저의 크기에 따라 자동으로 리사이징 해주는 레이아웃이며, 

브라우저 화면 사이즈에 따라  more는 고정되고 What'your name과 가로 dot의 비율이  조정됩니다.

활용하면 반응형웹에 유용할 듯하여 포스팅 합니다. 

코드는 아래와 같습니다.

<style> .con { width:100%; height:500px; border:1px solid black;} .con .left{float: left; height: 20px; font-size: 18px;font-weight: 500; line-height: 1.1;color: #423c3b; margin-right: 8px;} .con .right{float: right; width: 60px; border-radius: 5px; background-color: #adadad; text-align: center; height: 24px; line-height: 1.8;margin-left: 21px} .con .right .more{font-size: 13px; font-weight: 500; line-height: 1.5; color: #ffffff;} .con .bar{overflow: auto;height: 1px;background-color: #888888;margin: 9px 20px 0px 8px} </style> <div class="con"> <div class="left">What's your name</div> <div class="right"> <div class="more">more</div> </div> <div class="bar"></div> </div>