ボタン2つを左に、黒いボックスを右に配置しようと安直に作ったら
微妙にずれているし、コンテンツが無いのに右側にスクロールバーが出てしまいました。
さくっと直しましたが一応記録。
環境
- Google Chrome 103.0.5060.114
- Ubuntu Linux 20.04 LTS
コード
html:
<!DOCTYPE html>
<HTML>
<HEAD>
<META CHARSET="UTF-8">
<link href="style.css" rel="stylesheet">
</HEAD>
<BODY>
<DIV class="controls">
<DIV class="button1">
<FORM ACTION=. METHOD=POST>
<INPUT TYPE=SUBMIT VALUE="" >
</FORM>
</DIV>
<DIV class="button2">
<FORM ACTION=. METHOD=POST>
<INPUT TYPE=SUBMIT VALUE="" >
</FORM>
</DIV>
</DIV>
<DIV>
<DIV class="status">
</DIV>
</DIV>
</BODY>
</HTML>
style.css:
.status{
border: 3px solid #0000FF;
width: 100px;
height: 200px;
position:relative;
background-color:#000000;
top:-200px;
left:100px;
}
.button1 input[type="submit"]{
width:100px;
height:100px;
border: 1px solid #FF0000;
border-radius: 18px;
outline:none;
box-shadow:0 0 0 0 0;
}
.button2 input[type="submit"]{
width:100px;
height:100px;
border: 1px solid #00FF00;
outline:none;
box-shadow:0 0 0 0 0;
}
としています。安直に黒のボックスを以下のように指定していますが、根本的に間違っているようです。。
top:-200px;
left:100px;
解決
top,left 指定をやめて float:left で指定しました。
.controls {
float: left;
}
.status {
float: left;
}
.status{
border: 3px solid #0000FF;
width: 100px;
height: 200px;
position:relative;
background-color:#000000;
}
.button1 input[type="submit"]{
width:100px;
height:100px;
border: 1px solid #FF0000;
border-radius: 18px;
outline:none;
box-shadow:0 0 0 0 0;
}
.button2 input[type="submit"]{
width:100px;
height:100px;
border: 1px solid #00FF00;
outline:none;
box-shadow:0 0 0 0 0;
}
うまくいきました。