Bài viết này sẽ hướng dẫn cách tạo hai thẻ div và dùng CSS để tạo một vùng div cố định theo chiều dài được định trước và thẻ còn lại sẽ tự động thay đổi chiều dài theo kích thước của trình duyệt web(browser web) hoặc một thẻ div nào đó chứa 2 thẻ div này.
HTML Source:
CSS Source:
Demo:
HTML Source:
<div class="container" style="width: 100%;">
<div class="left">
Left div<br />
</div>
<div class="right">
Right div<br />
Right div<br />
Right div<br />
Right div<br />
</div>
</div>
<div class="left">
Left div<br />
</div>
<div class="right">
Right div<br />
Right div<br />
Right div<br />
Right div<br />
</div>
</div>
CSS Source:
.left {
float: left;
width: 250px;
padding: 5px;
border: 1px solid #ccc;
}
.right {
width: auto;
border: 1px solid #ccc;
padding: 5px;
margin-left: 261px;
/* right margin-left = 250 + 5 +1 */
/* if you want margin two div, you can write */
/* margin-left: calc(261px + 5px); */
}
float: left;
width: 250px;
padding: 5px;
border: 1px solid #ccc;
}
.right {
width: auto;
border: 1px solid #ccc;
padding: 5px;
margin-left: 261px;
/* right margin-left = 250 + 5 +1 */
/* if you want margin two div, you can write */
/* margin-left: calc(261px + 5px); */
}
Demo:
No comments:
Post a Comment