Stuck in positioning elements | Sololearn: Learn to code for FREE!


Stuck in positioning elements

Hi friends I wrote this code but I couldn't position my elements I need help I want to position them on same line at the top but am stuck. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> div { width: 34px; height: 6px; margin: 5px 0px ; background-color:black ; } #joggers { Width: 100%; height: 38px; background-color: yellow ; text-align:center ; Padding-top: 15px ; } </style> </head> <body> <!-- the menu icon--> <div></div> <div></div> <div></div> <!--the header text--> <div id="joggers" ><strong>joggers </strong></div> <!-- this is the login button--> <p style = "background-color: black; color:white; border-radius:30px; padding: 2px 10px 2px 10px; margin:10px 290px 10px 20px;" > <strong>login<strong></p> </body> </html>

1/24/2022 10:02:25 PM

Ambrose Adokwu

4 Answers

New Answer


This helped me a lot, to dont read over and over documentation and search for style i need.


Easiest is to wrap everything in container and set display: flex to that container (div) display: flex will by default put children in one line. You can change it later with more code I also wrap your menu bar (3 lines) inside new container and set it to display: block, this will remove some style what it inherit from main flex container, if you remove it you wont see menu bar. It is good habit to wrap all similar code as some container or segmatic element, this can help you, to style easier, and also help search engine and screen readers to understand your code better.


I suggest you to practice position with flex and grid in css. It can be hard in beggining. One tip,on google chrome when we set something to be flex or grid (added in version of chrome, v87 grid and v90 flex) when open developer menu and select element, we can easy add aditional code for flex and grid and make layout very easy with few clicks, this make work with tham much easier than to remember what each of tham do. It have some icons to show you what each do.


its here..... use ......position with your top, right, left, bottom div{ background-color: red; position: absolute; top: 40px; left: 40px; }