JSFiddle - React, Tailwind, and code Playground
HTML
<div id="middle">
div midle
<div id="container">
div container
<div id="left">div left</div><!-- #left-->
<div id="content">div content<p id="back-top"><a href="#top"><span></span>кнопка</a></p></div>
<!-- #content-->
</div><!-- #container-->
</div><!-- #middle-->
CSS
#back-top {
text-align:right;
position: absolute;
left: 100%;
}
#back-top a {
width: 40px;
display: block;
text-align: center;
font:bold 12px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
width: 40px;
height: 40px;
display: block;
margin-bottom: 2px;
background: #ddd url(02img/up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}
/*——————————————--Правила для блока middle——————————————————-*/
#middle {
min-height: 250px;
background-color: #FF0000;
}
/*——————————————--Правила для блока container—————————————————*/
#container{
width:980px;/*фиксированная ширина 980 пикселей*/
margin:0 auto; /*ровняем по центру, по горизонтали*/
background-color: #0066FF;
}
/*——————————————--Правила для блока left———————————————————*/
#left {
width:220px;
float:left;
background-color:#FF9933;
}
/*——————————————--Правила для блока content—————————————————-*/
#content {
text-align:left;
margin:0px;
width:760px;
margin-left:221px;
background-color: #009900;
position: relative;
}