どのように問題をオーバーラップするdivを解決し、CSSの流体レイアウトを維持するには？

Question

私は左と右の2つのdivを持っています。私は右のdivが左のdivの上に来るようになります。

この問題を解決するにはどうすればよいですか？

#left { 
    left: 3%; 
    position: absolute; 
    width: 340px; 
    margin-top: 10px; 
} 

#right { 
    position: absolute; 
    left: 24%; 
    width: 20%; 
    margin-top: 10px; 
} 

ありがとうございます。

Answer 1

widthをの場合は21%に変更してから、max-width: 340pxを追加してください。

#left { 
    left: 3%; 
    position: absolute; 
    width: 21% 
    max-width: 340px; 
    margin-top: 10px; 
} 

Answer 2

あなたはこれを試してみてください最小幅#left

#left { 
    left: 3%; 
    position: absolute; 
    width: 340px; 
    min-width: 21%; 
    margin-top: 10px; 
} 

#right { 
    position: absolute; 
    left: 24%; 
    width: 20%; 
    margin-top: 10px; 
} 

Answer 3

用セットで試すことができます。

#left { 
    left: 3%; 
    position: relative; 
    width: 340px; 
    min-width: 21%; 
    margin-top: 10px; 
} 

#right { 
    position: relative; 
    left: 24%; 
    width: 20%; 
    margin-top: 10px; 
}