Float trong CSS!

TuChiDo · February 18, 2015, 10:45am

E muốn chia trang web ra làm 2 phần 1 phần bên trái và 1 phần bên phải !

Đây là code HTML của e
MFW.net
- Trang Chủ
- LMHT
- AOE
- DOTA
XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN

XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN

XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN

XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN

XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN

XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN

XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN

XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN

XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN

XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN

XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN

XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN

XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN XIN CHÀO TẤT CẢ MỌI NGƯỜI TÔI TÊN LÀ ABC, ĐANG LÀ SINH VIÊN

Đây là code CSS của e

#wrapper{
	width: 1000px;
	margin: auto;
}
#sidebar{
	background: white;
	width: 20%;
	float: left;
}
ul{
	background: pink;
	color: red;
	list-style: none;
}
a:link,a:visited{
	text-decoration: none;
}
#content{
	background: red;
	color: white;
	float: right;
}

E dùng float căn phần sidebar sang bên left(trái) còn phần content sang bên phải(right) thì kết quả của e vẫn là phần sidebar ở trên và phần content ở dưới , chứ không ra được là sidebar bên trái và content bên phải .

dangh · January 19, 2015, 10:59am

Set cái width của #content thành 80% là được mà
http://jsfiddle.net/8rgLpz6y/

Tại cái #content của bạn nó bự quá, nếu không set width (tương đương width: auto) thì nó bự ra 100% luôn vì cái text quá dài, nên nó không fit được phần bên phải đó.

TuChiDo · January 20, 2015, 6:29am

Vâng , e hiểu vấn đề rồi ạ .

laptrinhio · January 20, 2015, 11:41am

tạo sidebar thì nên fix kích thước cứng cho nó, còn phần content còn lại để auto cho vừa khung hiển thị.
phần nội dung ở bên dưới cái sidebar và content này nên xoá hai bên mép đi, không là element lại bị trôi tự do

.clearfix {
    clear: both;
}

.clearfix:before {
    display: table;
    content: "";
}