flexbox: how to align 1 div to left and 1 div to right in the same line
Question
I have div topbar and div menu on top, div content under topbar and content is in the left side of website. Im trying to add div sidebar right to content. I was using several methods still can't find solution. I think some line of code ale blocking that space right to content but idk. I used borders red to help me with website positioning.
body { font-family: 'Abel', sans-serif; margin: 0 auto; background-color: #008000; } .flexbox-container { display: flex; flex-direction: column; height: 100vh; padding-bottom: 20px; border: 2px solid red; } .flexbox-container div.topbar { height: 50px; text-align: center; font-size: 110%; font-family: 'Montserrat', sans-serif; border: 2px solid red; } .flexbox-container div.menu { height: 20px; background-color: #228B22; text-align: center; font-family: 'Montserrat', sans-serif; word-spacing: 20px; letter-spacing: 1px;' border: 2px solid red; } a:link, a:visited { text-decoration: none; color: #010f00; } a:hover { color: gray; } li { display: inline-block; padding-left: 15px; padding-right: 30px; border-right: solid 1px black; list-style-type: none; } li:first-child { padding-left: 30px; padding-right: 30px; border-left: solid 1px black; } .flexbox-container div.menu p { margin: 0; color: yellow; border: 2px solid red; } .flexbox-container div.content { margin-top: 25px; background-color: #228B22; height: 550px; text-align: center; width: 60%; border: 2px solid red; } .flexbox-container div.sidebar { margin-top: 25px; background-color: #228B22; text-align: center; height: 550px; width: 10%; border: 2px solid red; float: right; }
<!DISCODE HTML> <html lang="pl"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link rel="stylesheet" href="style.css" type="text/css" /> <title>Piotr Nowak - Portfolio</title> <meta name="description" content="piotr nowak, programista backendowy freelancer" /> <meta name="keywords" content="programista, backend, freelancer, portfolio, web" /> <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> </head> <body> <div class="flexbox-container"> <header> <div class="topbar"> <h1><a href="index.html">ZlotyKot Trafika</a></h1> </div> </header> <nav> <div class="menu"> <ul> <li><a href="aktualnosci.html" alt="_blank">Aktualności</a></li> <li><a href="oferta.html" alt="_blank">Oferta</a></li> <li><a href="nowosci.html" alt="_blank">Nowości</a></li> <li><a href="kurier.html" alt="_blank">Kurier</a></li> <li><a href="fotogaleria.html" alt="_blank">Fotogaleria</a></li> <li><a href="kontakt.html" alt="_blank">Kontakt</a></li> </ul> </div> </nav> <main> <div class="content"> <h1>Lorem ipsum. </h1> <br> </br> <br> </br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at augue sollicitudin, malesuada lorem id, gravida arcu. Nam metus arcu, elementum vel vulputate in, hendrerit et turpis. Morbi mattis purus ipsum, vitae blandit orci accumsan vel. Aliquam varius eleifend euismod. Curabitur varius fermentum massa, in finibus lacus cursus rutrum. Aenean quis semper nisi. In id fringilla mauris. Proin et massa lobortis, blandit massa sit amet, congue ante. Aliquam erat volutpat. <br> </br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at augue sollicitudin, malesuada lorem id, gravida arcu. Nam metus arcu, elementum vel vulputate in, hendrerit et turpis. Morbi mattis purus ipsum, vitae blandit orci accumsan vel. Aliquam varius eleifend euismod. Curabitur varius fermentum massa, in finibus lacus cursus rutrum. Aenean quis semper nisi. In id fringilla mauris. Proin et massa lobortis, blandit massa sit amet, congue ante. Aliquam erat volutpat. <br> </br> Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas fermentum malesuada orci. Suspendisse nec quam vitae ex lacinia tincidunt in sit amet felis. Cras ac varius neque. Donec ullamcorper, diam id blandit blandit, mi massa consectetur nibh, eget porttitor nibh diam quis felis. Donec arcu neque, vulputate quis felis a, tincidunt tempus sapien. Aliquam tortor nulla, porta vitae eros sit amet, fermentum maximus mi. Morbi ac tincidunt lacus, maximus ultrices eros. In vehicula tempus dictum. Mauris quis aliquam magna. Morbi diam nisl, pharetra sed suscipit vel, dictum eu enim. Sed eu risus non ex porta venenatis elementum ultrices augue. Nam non vulputate ante, eget porttitor ante. Fusce eget lectus in orci ullamcorper sollicitudin a id erat. Morbi vestibulum risus sed iaculis dictum. Aliquam id malesuada est. Donec venenatis commodo turpis sed placerat. Curabitur vulputate varius ligula non feugiat. Cras vulputate faucibus odio a posuere. </div> </main> <div class="sidebar"> </div> </div> </body> </html>
2 answers
solution1
0 2019-03-07 12:11:29
Is this what you want?
body { font-family: 'Abel', sans-serif; margin: 0 auto; background-color: #008000; } .flexbox-container { display: flex; flex-direction: row; height: 100vh; padding-bottom: 20px; border: 2px solid red; } .flexbox-container div.topbar { height: 50px; text-align: center; font-size: 110%; font-family: 'Montserrat', sans-serif; border: 2px solid red; } .flexbox-container div.menu { height: 20px; background-color: #228B22; text-align: center; font-family: 'Montserrat', sans-serif; word-spacing: 20px; letter-spacing: 1px;' border: 2px solid red; } a:link, a:visited { text-decoration: none; color: #010f00; } a:hover { color: gray; } li { display: inline-block; padding-left: 15px; padding-right: 30px; border-right: solid 1px black; list-style-type: none; } li:first-child { padding-left: 30px; padding-right: 30px; border-left: solid 1px black; } .flexbox-container div.menu p { margin: 0; color: yellow; border: 2px solid red; } .flexbox-container div.content { margin-top: 25px; background-color: #228B22; height: 550px; text-align: center; width: 60%; border: 2px solid red; } .flexbox-container div.sidebar { margin-top: 25px; background-color: #228B22; text-align: center; height: 550px; width: 10%; border: 2px solid red; float: right; }
<!DISCODE HTML> <html lang="pl"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link rel="stylesheet" href="style.css" type="text/css" /> <title>Piotr Nowak - Portfolio</title> <meta name="description" content="piotr nowak, programista backendowy freelancer" /> <meta name="keywords" content="programista, backend, freelancer, portfolio, web" /> <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> </head> <body> <div class="flexbox-container"> <header> <div class="topbar"> <h1><a href="index.html">ZlotyKot Trafika</a></h1> </div> </header> <nav> <div class="menu"> <ul> <li><a href="aktualnosci.html" alt="_blank">Aktualności</a></li> <li><a href="oferta.html" alt="_blank">Oferta</a></li> <li><a href="nowosci.html" alt="_blank">Nowości</a></li> <li><a href="kurier.html" alt="_blank">Kurier</a></li> <li><a href="fotogaleria.html" alt="_blank">Fotogaleria</a></li> <li><a href="kontakt.html" alt="_blank">Kontakt</a></li> </ul> </div> </nav> <main> <div class="content"> <h1>Lorem ipsum. </h1> <br> </br> <br> </br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at augue sollicitudin, malesuada lorem id, gravida arcu. Nam metus arcu, elementum vel vulputate in, hendrerit et turpis. Morbi mattis purus ipsum, vitae blandit orci accumsan vel. Aliquam varius eleifend euismod. Curabitur varius fermentum massa, in finibus lacus cursus rutrum. Aenean quis semper nisi. In id fringilla mauris. Proin et massa lobortis, blandit massa sit amet, congue ante. Aliquam erat volutpat. <br> </br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at augue sollicitudin, malesuada lorem id, gravida arcu. Nam metus arcu, elementum vel vulputate in, hendrerit et turpis. Morbi mattis purus ipsum, vitae blandit orci accumsan vel. Aliquam varius eleifend euismod. Curabitur varius fermentum massa, in finibus lacus cursus rutrum. Aenean quis semper nisi. In id fringilla mauris. Proin et massa lobortis, blandit massa sit amet, congue ante. Aliquam erat volutpat. <br> </br> Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas fermentum malesuada orci. Suspendisse nec quam vitae ex lacinia tincidunt in sit amet felis. Cras ac varius neque. Donec ullamcorper, diam id blandit blandit, mi massa consectetur nibh, eget porttitor nibh diam quis felis. Donec arcu neque, vulputate quis felis a, tincidunt tempus sapien. Aliquam tortor nulla, porta vitae eros sit amet, fermentum maximus mi. Morbi ac tincidunt lacus, maximus ultrices eros. In vehicula tempus dictum. Mauris quis aliquam magna. Morbi diam nisl, pharetra sed suscipit vel, dictum eu enim. Sed eu risus non ex porta venenatis elementum ultrices augue. Nam non vulputate ante, eget porttitor ante. Fusce eget lectus in orci ullamcorper sollicitudin a id erat. Morbi vestibulum risus sed iaculis dictum. Aliquam id malesuada est. Donec venenatis commodo turpis sed placerat. Curabitur vulputate varius ligula non feugiat. Cras vulputate faucibus odio a posuere. </div> </main> <div class="sidebar"> </div> </div> </body> </html>
solution2
0 2019-03-07 12:23:32
I have put sidebar in main and gave main{ display:flex} also removed all the static height which you have given. thanks
body { font-family: 'Abel', sans-serif; margin: 0 auto; background-color: #008000; } main{display: flex} .flexbox-container { display: flex; flex-direction: column; padding-bottom: 20px; border: 2px solid red; } .flexbox-container div.topbar { text-align: center; font-size: 110%; font-family: 'Montserrat', sans-serif; border: 2px solid red; } .flexbox-container div.menu { background-color: #228B22; text-align: center; font-family: 'Montserrat', sans-serif; word-spacing: 20px; letter-spacing: 1px;' border: 2px solid red; } a:link, a:visited { text-decoration: none; color: #010f00; } a:hover { color: gray; } li { display: inline-block; padding-left: 15px; padding-right: 30px; border-right: solid 1px black; list-style-type: none; } li:first-child { padding-left: 30px; padding-right: 30px; border-left: solid 1px black; } .flexbox-container div.menu p { margin: 0; color: yellow; border: 2px solid red; } .flexbox-container div.content { margin-top: 25px; background-color: #228B22; text-align: center; width: 60%; border: 2px solid red; } .flexbox-container div.sidebar { margin-top: 25px; background-color: #228B22; text-align: center; width: 10%; border: 2px solid red; float: right; }
<!DISCODE HTML> <html lang="pl"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link rel="stylesheet" href="style.css" type="text/css" /> <title>Piotr Nowak - Portfolio</title> <meta name="description" content="piotr nowak, programista backendowy freelancer" /> <meta name="keywords" content="programista, backend, freelancer, portfolio, web" /> <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> </head> <body> <div class="flexbox-container"> <header> <div class="topbar"> <h1><a href="index.html">ZlotyKot Trafika</a></h1> </div> </header> <nav> <div class="menu"> <ul> <li><a href="aktualnosci.html" alt="_blank">Aktualności</a></li> <li><a href="oferta.html" alt="_blank">Oferta</a></li> <li><a href="nowosci.html" alt="_blank">Nowości</a></li> <li><a href="kurier.html" alt="_blank">Kurier</a></li> <li><a href="fotogaleria.html" alt="_blank">Fotogaleria</a></li> <li><a href="kontakt.html" alt="_blank">Kontakt</a></li> </ul> </div> </nav> <main> <div class="content"> <h1>Lorem ipsum. </h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at augue sollicitudin, malesuada lorem id, gravida arcu. Nam metus arcu, elementum vel vulputate in, hendrerit et turpis. Morbi mattis purus ipsum, vitae blandit orci accumsan vel. Aliquam varius eleifend euismod. Curabitur varius fermentum massa, in finibus lacus cursus rutrum. Aenean quis semper nisi. In id fringilla mauris. Proin et massa lobortis, blandit massa sit amet, congue ante. Aliquam erat volutpat. <br> </br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at augue sollicitudin, malesuada lorem id, gravida arcu. Nam metus arcu, elementum vel vulputate in, hendrerit et turpis. Morbi mattis purus ipsum, vitae blandit orci accumsan vel. Aliquam varius eleifend euismod. Curabitur varius fermentum massa, in finibus lacus cursus rutrum. Aenean quis semper nisi. In id fringilla mauris. Proin et massa lobortis, blandit massa sit amet, congue ante. Aliquam erat volutpat.</p><p> Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas fermentum malesuada orci. Suspendisse nec quam vitae ex lacinia tincidunt in sit amet felis. Cras ac varius neque. Donec ullamcorper, diam id blandit blandit, mi massa consectetur nibh, eget porttitor nibh diam quis felis. Donec arcu neque, vulputate quis felis a, tincidunt tempus sapien. Aliquam tortor nulla, porta vitae eros sit amet, fermentum maximus mi. Morbi ac tincidunt lacus, maximus ultrices eros. In vehicula tempus dictum. Mauris quis aliquam magna. Morbi diam nisl, pharetra sed suscipit vel, dictum eu enim. Sed eu risus non ex porta venenatis elementum ultrices augue. Nam non vulputate ante, eget porttitor ante. Fusce eget lectus in orci ullamcorper sollicitudin a id erat. Morbi vestibulum risus sed iaculis dictum. Aliquam id malesuada est. Donec venenatis commodo turpis sed placerat. Curabitur vulputate varius ligula non feugiat. Cras vulputate faucibus odio a posuere. </p> </div> <div class="sidebar"> </div> </main> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Align div left and right
How to align the div in header right ,left and center
How to align div tag left and right extreme?
Vertical align with right - left div
Left align float:right div
Align div to left and text to right
How to right align text inside a div for mutiline content using flexbox
How to get right div to align properly with left side div?
Align div in one line, extreme left, middle , extreme right
Flexbox - responsive right align UL within div?
Related Tags