Hai divs: một cố định, kéo dài khác

Question

Tôi cố gắng để thực hiện điều này:

Nhưng tôi đang gặp khó khăn nhận được hai divs giữa để chơi đẹp. Nếu tôi đặt cả hai thành một số tương đối (30% và 70%) nó "hoạt động" nhưng div bên trái thay đổi kích thước khi người dùng thay đổi chiều rộng cửa sổ trình duyệt.

#floatitleft{width:30%; float:left;} 
#floatitright{width:70%; float:left;} 

Những gì tôi muốn là, như hình ảnh minh họa

#floatitleft{width:300px; float:left;} 
#floatitright{width:100%; float:left;} 

Nhưng điều này gây ra "floatitright" để kết thúc dưới floatitleft. Và nếu tôi thiết lập nó đến 70% nó sẽ kết thúc ở bên phải của "floatitleft" nhưng khi tôi thay đổi kích thước trình duyệt một chút nó kết thúc lên bên dưới một lần nữa. Phải làm gì?

UPDATE: Cuối cùng tôi đã kết thúc với:

#topper{ 
    height:100px; 
    width:100%; 
    background-color:blue; 
} 
#wrapperz{ 
    height:inherit; 
    width:100%; 
} 
#wrapperz p{margin:0 0 0 0px; padding:10px 10px 0px 10px; color:#0F0F0F;} 
#wrapperz #floatitleft{ 
    width:300px; 
    float:left; 
} 
#wrapperz #floatitright{ 
    margin-left: 300px; 
    min-width:300px; 
} 
#bottommer{ 
    height:100px; 
    width:100%; 
    background-color:red; 
} 

nào sẽ được sử dụng như:

<div id="topper"> 
test 
</div> 

<div id="wrapperz"> 

<div id="floatitleft"> 
<p> Stuff </p> 
</div> 

<div id="floatitright"> 
<p> Stuff </p> 
</div> 

<div style="clear: both;"/> 

</div> <!-- Close Wrapper --> 

<div id="bottommer"> 
test 
</div> 

Lưu ý rằng đây không phải là HTML thích hợp nhưng nó chỉ đóng vai trò như là giải pháp cho tôi thí dụ. Ngoài ra, "div style =" clear: cả hai "là escpecially quan trọng nếu bạn thử điều này bởi vì không sử dụng các cuases footer để mess up như wrapper không đúng cách căng thẳng theo chiều dọc.Nhưng Mark đã cung cấp một những gì tôi tin rằng được tốt hơn/sạch thay thế dưới đây.

Answer 1

Điều này có hiệu quả không?

#floatitleft{ 
    width:300px; 
    float:left; 
} 
#floatitright{ 
    margin-left: 300px; 
} 

Answer 2

bạn có thể thực hiện điều đó bằng hệ thống lưới rất dễ dàng.

http://960.gs/

Hãy xem, bạn có thể chọn cột 12 hoặc 16, 24 hoặc thậm chí nhiều hơn. bạn chỉ cần sử dụng các lớp như "grid_4", "grid_8" tùy thuộc vào chiều rộng bạn cần.

Answer 3

Ở đây, tôi đã thực hiện một bản sao của hình ảnh của bạn: jsbin.com/ipexep/3 (nhấp vào "chỉnh sửa trong jsbin" ở phía trên bên phải để xem và chỉnh sửa mã nguồn)

tôi cho chiều cao của các phần trên cùng và dưới cùng, tôi lấy chiều cao cho chúng mà bạn đưa vào hình ảnh.

Lưu ý: Tôi đã làm điều đó bằng cách làm cho mọi phần được định vị hoàn toàn và thiết lập các thuộc tính trên cùng, dưới cùng, bên trái, hoặc bên phải tương ứng.

Ngoài ra, hãy lưu ý rằng phương pháp của tôi sẽ khớp với mọi kích thước màn hình. Tôi đã streched nó trong mọi lĩnh vực bạn không chỉ định một kích thước. (ngoại trừ đầu trang và chân trang cần kích thước chiều cao để tôi đoán vì bạn không chỉ định)