How to the left of canvas to place in a column 3 divs?

.q,.w,.e,.r { width: 100px; padding: 10px; background: #fc0; position: relative; display: inline-block; } .q { background-color: red;} .w { background-color: green;} .e { background-color: #ff11ff;} .r { width: auto; background-color: #ff1155; display: block;} .container { text-align: center; float: left; position: relative; left: 50%; transform: translate(-50%); } 
 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link rel="stylesheet" type="text/css" href="111.css"> </head> <body> <div class="container"> <div class="q">q</div> <div class="w">w</div> <div class="e">e</div> <canvas class="r" id="canvas" width="1200" height="1000" style="width:300px; height:300px;" ></canvas> </div> </body> </html>

  • one
    Seriously? Now each necessary positioning will be made out by a separate issue maybe better to start learning the basics of css positioning? or in the last question something globally incomprehensible? - lexxl
  • The preview did not break for some reason, but because you inserted CSS markup in the JS window. - Alex Krass
  • one
    @lexxl, well, gradually it collects questions from the answers, as from the designer. We took canvas and positioning , now we need to rearrange it a bit ... When there are enough answers, there will be a question how to make the whole site :) - Qwertiy ♦

1 answer 1

  <div class="container clearfix"> <div class="qwe"> <div class="q">q</div> <div class="w">w</div> <div class="e">e</div> 


 .q,.w,.e,.r { width: 100px; padding: 10px; background: #fc0; /* position: relative; */ } .qwe { float: right; } .q { background-color: red;} .w { background-color: green;} .e { background-color: #ff11ff;} .r { width: auto; float: left; background-color: #ff1155; display: block; } .container { width: 440px; margin: 0 auto; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; /* Хак для IE 6 и 7 */ }

Like this