boxを右側にpx固定する際の記述 CSS

画面の右側にメニューをpx固定で作るときなど、

BOXの中に2つBOXを作り右側だけｐｘ固定で表示したい時。

@charset "UTF-8";

body{
margin: 0;
}
.box1, .box2, .box3,.box4{
background: lightpink;
border: solid 5px crimson;
box-sizing: border-box;
}

.boxA:after{
content: "";
display: block;
clear: both;
}

.box2{
float: left;
width: 100%;
margin-right: -300px;   /* box3のスペースを作ってあげる */
padding-right: 300px;  /* box2のコンテンツがbox3に回り込み防止 */
}

.box3{
float: right;
width: 300px;
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

もし、

padding-right: 300px;

のみでbox3のスペース作ろうとすると

こうなっちゃう・・・。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

px固定するとき、左側なら

可変幅のBoxを下のように書けば作れる。

.box3{

    float:none;

    width:auto;

 }

右固定の方が、記述が増え、気を付ける事増える。