How to position these elements for different screens?

Question

The block of checkboxes is stuck on the left to the bottom, and the "Add" button is stuck on the right to the bottom. How to realize that on different screens nothing moved out?

html, body { margin: 0; padding: 0; } h1 { font-size: 18px; font-weight: bold; line-height: 29px; color: #1b1b1b; } // body{padding-top: 10px} .container { display: flex; width: 100%; outline: 1px solid red; /*del*/ padding-top: 25px; background: #ffffff; } .left-block { background: #e9e9e9; width: 198px; height: 663px; -ms-flex: 0 198px; -webkit-box-flex: 0; -moz-box-flex: 0; -ms-box-flex: 0; box-flex: 0; } .img-left { text-align: center; } .img-left img { margin-bottom: 23px; } .right-block { // margin-left: 28px; outline: 1px solid green; /*del*/ -ms-flex: 0 198px; -webkit-box-flex: 0; -moz-box-flex: 0; -ms-box-flex: 0; box-flex: 0; width: 100%; padding-left: 27px; } .text { font-family: arial; font-size: 18px; font-weight: 700; color: #177cbc; } hr { height: 2px; margin: 0; border: 0; background: linear-gradient(to right, #027abe 0%, transparent 100%); } .block-row { margin-top: 20px; display: flex; min-height: 263px; border: 1px solid #1b1b1b; } .img-block { // width: 45%; border-right: 1px solid #1b1b1b; padding: 30px 55px; display: -webkit-flex; display: -ms-flex; display: flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; } .outline { display: inline-flex; padding: 3px 9px; border: 1px solid #1b1b1b; } .content-block { position: relative; width: 100%; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Company name</title> </head> <body> <div class="container"> <div class="left-block"> <div class="img-left"> <img src="img/lb-1.jpg" alt="easyflex"> <img src="img/lb-2.jpg" alt="adv"> <img src="img/lb-1.jpg" alt="easyflex"> <img src="img/lb-2.jpg" alt="adv"> </div> </div> <div class="right-block"> <div class="text">Main content listing header.</div> <hr> <div class="block-row"> <div class="img-block"> <div class="outline"><img src="img/globe.png" alt="globe"></div> </div> <div class="content-block"> <h1>Header always on top and could be any length. Header always on top and could be any length.</h1> </div> <div class="check"> <form action="#" method="post"> <label><input type="checkbox">First option.</label><br> <label><input type="checkbox">Second option.</label><br> <label><input type="checkbox">Third option.</label><br> <label><input type="checkbox">Fourth option.</label> <input class="btn" type="submit" value="+add"> </form> </div> </div> </div> </div> </body> </html>

qpeela qpeela 418 one four 14 · Accepted Answer · 2017-03-16T04:59:13

With flexbox you can do this:

Inside the content-block arrange everything in a column ( flex-direction: column; ). With justify-content: space-between; we glue the first element on top, glue the last element to the bottom, and the rest will have the same indentation between themselves.
Inside .check with justify-content: space-between; scatter two elements in the corners.

Added two div 'a with text to understand how other elements are arranged.

 html, body { margin: 0; padding: 0; } h1 { font-size: 18px; font-weight: bold; line-height: 29px; color: #1b1b1b; } // body{padding-top: 10px} .container { display: flex; width: 100%; outline: 1px solid red; /*del*/ padding-top: 25px; background: #ffffff; } .left-block { background: #e9e9e9; width: 198px; height: 663px; -ms-flex: 0 198px; -webkit-box-flex: 0; -moz-box-flex: 0; -ms-box-flex: 0; box-flex: 0; } .img-left { text-align: center; } .img-left img { margin-bottom: 23px; } .right-block { // margin-left: 28px; outline: 1px solid green; /*del*/ -ms-flex: 0 198px; -webkit-box-flex: 0; -moz-box-flex: 0; -ms-box-flex: 0; box-flex: 0; width: 100%; padding-left: 27px; } .text { font-family: arial; font-size: 18px; font-weight: 700; color: #177cbc; } hr { height: 2px; margin: 0; border: 0; background: linear-gradient(to right, #027abe 0%, transparent 100%); } .block-row { margin-top: 20px; display: flex; min-height: 263px; border: 1px solid #1b1b1b; } .img-block { // width: 45%; border-right: 1px solid #1b1b1b; padding: 30px 55px; display: -webkit-flex; display: -ms-flex; display: flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; } .outline { display: inline-flex; padding: 3px 9px; border: 1px solid #1b1b1b; } .content-block { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: space-between; } .check form { display: flex; align-items: flex-end; justify-content: space-between; padding: 20px; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Company name</title> </head> <body> <div class="container"> <div class="left-block"> <div class="img-left"> <img src="img/lb-1.jpg" alt="easyflex"> <img src="img/lb-2.jpg" alt="adv"> <img src="img/lb-1.jpg" alt="easyflex"> <img src="img/lb-2.jpg" alt="adv"> </div> </div> <div class="right-block"> <div class="text">Main content listing header.</div> <hr> <div class="block-row"> <div class="img-block"> <div class="outline"><img src="img/globe.png" alt="globe"></div> </div> <div class="content-block"> <h1>Header always on top and could be any length. Header always on top and could be any length.</h1> <div> <p>Up is opinion message manners correct hearing husband my. Disposing commanded dashwoods cordially depending at at. Its strangers who you certainty earnestly resources suffering she. Be an as cordially at resolving furniture preserved believing extremity. Easy mr pain felt in. Too northward affection additions nay. He no an nature ye talent houses wisdom vanity denied. </p> </div> <div> <p> Up is opinion message manners correct hearing husband my. Disposing commanded dashwoods cordially depending at at. Its strangers who you certainty earnestly resources suffering she. Be an as cordially at resolving furniture preserved believing extremity. Easy mr pain felt in. Too northward affection additions nay. He no an nature ye talent houses wisdom vanity denied. </p> </div> <div class="check"> <form action="#" method="post"> <div> <label><input type="checkbox">First option.</label><br> <label><input type="checkbox">Second option.</label><br> <label><input type="checkbox">Third option.</label><br> <label><input type="checkbox">Fourth option.</label> </div> <input class="btn" type="submit" value="+add"> </form> </div> </div> </div> </div> </div> </body> </html>

@AlexanderZharichenko. I hope you understand how elements can be positioned using flexbox.

How to position these elements for different screens?

1 answer 1

More articles: