Hai số div nằm ngay trên một số khác

Question

Tôi đang cố gắng đặt hai div ở bên phải của div cha lên trên khác. Một cái gì đó như thế này:

div#top 
|-------------------------------------||------------| 
|div#parent       ||div#menu | 
|       |---------|||float:right | 
|       |div#up |||   | 
|       |   |||   | 
|       |---------|||------------| 
|          | 
|       |---------|| 
|       |div#down || 
|       |   || 
|       |---------|| 
|-------------------------------------| 

Bất kỳ ý tưởng làm thế nào để làm điều đó bằng cách sử dụng css? Tôi không thể sử dụng bảng ở đây vì div # up được thêm vào trong trang Master (ASP.NET) và div # down được thêm vào trong nội dung. Div # cha mẹ là chất lỏng với một số min-width thiết lập và chứa nội dung mà không nên được chồng lên nhau bởi các div vì vậy tôi nghĩ rằng vị trí: tuyệt đối là ra khỏi câu hỏi ở đây quá.

Một chi tiết khác: ở bên trái và bên phải của div # parent có ale divs lưu hành sang trái và phải với menu. Vì vậy, thêm rõ ràng: trái/phải để div # xuống trôi nổi đặt nó theo một trong các menu này ...

Answer 1

Bạn cần phải chắc chắn rằng khối mẹ (#parent trong trường hợp của bạn) sẽ trở thành bối cảnh khối định dạng của các div #up và #down, do đó bất kỳ thanh toán bù trừ chỉ xảy ra bên trong bối cảnh khối định dạng và bỏ qua các phao nổi bên ngoài của nó. Cách dễ nhất để thực hiện việc này thường là để cho #parent thả nổi, hoặc tặng cho nó overflow khác với visible.

http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Dưới đây một số bằng chứng, mà tôi đã nhận nó đúng thời gian này: http://jsfiddle.net/Pagqx/

Xin lỗi vì sự nhầm lẫn.

Answer 2

Cá nhân tôi sẽ bọc chúng trong một div container, và cung cấp cho nó một chiều rộng và nổi nó đúng.

#sidebar{ 
    width: 250px; 
    float: right; 
} 

Answer 3

Bạn cần phải sử dụng cả hai float:right và clear:right, đảm bảo rằng phía bên tay phải của nguyên tố này là không bị cản trở đến mép của phần tử chứa.

<div id="parent" style="width: 80%"> 

    <div id="up" style="float: right; clear: both;">div with id 'up'</div> 
    <div id="down" style="float: right; clear: both;">div with id 'down'</div> 
    'parent' div 

</div>