Hỏi về float trong css

[haobien]

Mình post bài nhầm box nên post lại sang đây.
Mình có một tình huống như hình sau (mình up hình bị fail hoài nên đành để link này, thông cảm):
http://hosting06.imagecross.com/image-hosting-15/79342.JPG
Mình làm như sau:
//HTML
<div class="test">
<div class="left">
<img src="images/test.jpg" width="100" height="100" />
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</div>
</div>

//CSS
.test{
width:400px;
}
.left{
width:100px;
height:100px;
float:left;
}
.right{
margin-left:110px;
background:#CCCCCC;
}
Vì yêu cầu của trường hợp này là k để chiều rộng cố định cho "right" nên mình phải dùng margin-left cho nó, và text ở phần right có thể dài ngắn tùy ý . Với html và css như trên thì các browser đều hiển thị đúng, chỉ có IE6 là k đúng, như hình:
http://hosting06.imagecross.com/image-hosting-15/12621.JPG
Chịu khó nhìn kỹ 1 chút các bạn sẽ thấy 3 dòng text ở cuối nó nhích sang bên trái khoảng 3px. Mình đã thử nhìu cách nhưng k sửa được, mình k thể quy định chìu cao của hình theo text được vì độ dài text có thể thay đổi tùy thích, cũng k thể quy định chìu rộng của right để float:right cho nó được yêu cầu là như thế. Bạn nào có thể cho mình bít lý do tại sao IE6 lại bị như vậy được k? Và cách sửa thì càng tốt.
Cảm ơn các bạn đã xem tin, chúc một ngày tốt lành.

[nnanh01]

các yêu cầu của bạn đã xóa bỏ đi hết các cách để chỉnh sửa nhưng mình thấy vài chổ vô lý

[Quartermain]

bạn thử cho text-align: left chưa

[nnanh01]

Các cái Yêu cầu của bạn đều chống lại tất cả các cách để chỉnh sửa. Tuy nhiên mình tìm thấy cái vô lý trong các câu nói của bạn.

không thể quy định chiều rộng của right: class test chứa left và right có kích thước 400px. chiều rộng của right = 400-110(margin-left)=290px. Cái này không phải là cố định chiều rộng cho right hay sao??.

Tại sao lại yêu cầu không đc float:right trong lớp class right??. Điều này không có nghĩa gì cả. Vì float right cho nó không hề ảnh hưởng gì đến các kích thước bạn quy định ở trên.

Hai điều trên suy ra hình nhw bạn đang đánh đố mọi người chứ không phải là hỏi! Nếu thảo luận hãy nói là thảo luận chắc hay hơn!

Bạn nào có thể cho mình bít lý do tại sao IE6 lại bị như vậy được k? Câu hỏi hay. Theo thiển cận của mình thì phần left đã ảnh hưởng đến thuộc tính margin-left của right, vì khi bạn thay đổi thuộc tính height của left thì 3 dòng text ở cuối không còn là 3 dòng nữa mà nhiều hơn (height của left 80px) hay ít hơn (height của left 130px). Còn Lý do tại sao nó ảnh hưởng như thế thì chắc phải đi hỏi Microsoft.

[haobien]

à, xin lỗi mình k nói rõ, vì trong dự án thì mình chưa bít modul của mình sẽ được đặt ở đâu, nó tùy thuộc vào cái mà chứa nó nên mình chưa bít được chiều rộng của mình là bao nhiu? Còn ở trên mình cho chiều rộng cái test để nó nhỏ lại cho các bạn dễ nhìn thôi, chứ k có cái width:400px đó. Còn nếu mình k quy định chiều rộng mà float:right rồi để text-align: left thì cũng được nhưng trong trường hợp ngta chỉ nhập 2, 3 chữ thôi thì nó sẽ ở tít lề bên phải. Còn cái height của left thì mình chỉ cho bằng cái hình thôi, để trong trường hợp ngta nhập text ngắn thì cái item (mỗi item gồm left và right như vậy) của mình lấy theo chiều cao của left, còn nếu ngta nhập text dài thì item có chiều cao của text.

[=========> Bổ sung bài viết <=========]

mà mình k làm được mới hỏi chớ đánh đố các bạn làm gì, mình cũng đâu rảnh đến mức đó đâu

[piglet_77621]

Theo mình, vấn đề này có thể giải thích như sau:
Phần .left có float:left, height: 100px, width: 100px
Phần .right chỉ đặt margin-left mà ko có float, nên phần nội dung của nó sẽ tự động chèn sau phần có float:left, nó sẽ chèn từ trái sang phải, từ trên xuống dưới.
Trên IE6 hiển thị sai, vì bạn chưa reset các thẻ về trạng thái ban đầu. Thằng FF và IE7 thì thông minh hơn, một số thẻ nó tự reset về mặc định nên sẽ hiển thị đúng.
Bạn cho thêm đoạn css này để reset các thẻ về trạng thái đầu nhé, vì mặc định có vài thẻ sẽ có border, outline, padding hoặc margin.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}

Nếu như ko có phần reset bên trên, giả sử thẻ div hay ảnh img có 1 trong các thuộc tính kia, thì khi phần nội dung bên phải chạy hết 100px theo chiều cao, nó sẽ bị lệch về phía bên trái 1 chút :)

Hi vọng hướng giải quyết của mình sẽ giúp đc bạn. Thân.

[haobien]

Cảm ơn bạn, piglet_77621!
Nhưng mình đã reset browser rồi vẫn k được. Hỏi mấy sư phụ thì cách giải quyết rất đơn giản là thêm dòng sau vào phần right:
display:inline-block
Nếu dùng float:left rồi margin-left cho phần right thì nếu phần right là hình ảnh hay gì gì đó thì k bị, nhưng nếu là text thì bị như vậy.