html - 2 つの div の位置

Question

Web ページに 2 つの div 要素があり、2 つの要素の CSS を含めました。

#item-browsing {
    width: 65%;
    height: 500px;
    float: left;
    position: relative;
    min-width: 915px;
}

#bill-information {
    width: 315px;
    height: 100%;
    float: left;
    box-shadow: 3px -3px 11px -7px;
}

ブラウザのサイズをさまざまな解像度に合わせて変更すると、アイテム ブラウジング要素がダウンします。上記の意味のスクリーンショットを添付しました。

CSS を使用してこの問題を解決するにはどうすればよいですか。

ありがとうございました。

Answer 1

この 2 つの要素の親要素をposition: relative指定し、関連する次の css を変更します#item-browsing。

#item-browsing {
    height: 500px;
    position: absolute;
    right: 315px; /* or left */
    left: 0;
    top: 0;
    bottom: 0;
    min-width: 915px;
}

ところで、SOに関するこの問題に基づいた多くの投稿があります。

働くフィドル

Answer 2

ラッパーを追加し、min-width含まれている両方の div の幅の合計で設定します。

#wrapper {
    min-width: 1230px;
}

簡易デモ

Answer 3

これらの 2 つの div にラッパーを配置するだけです。そのようです：

#wrapper{
width: [your width];
clear: both;
padding: 0;
overflow: hidden;
}

#item-browsing {
    width: 65%;
    height: 500px;
    float: left;
    position: relative;
    min-width: 915px;
}

#bill-information {
    width: 315px;
    height: 100%;
    float: left;
    box-shadow: 3px -3px 11px -7px;
}

Answer 4

ブラウザの幅が 915 (最小幅)+315(幅)=1230px 未満の場合、2 番目の div の右側にスペースがありません。