LeonLatex Posted July 14, 2022 Share Posted July 14, 2022 (edited) I have two DIV. I want them on the same line next to each other. But no matter what I do, one will move above or below the other. Can anybody help me? @charset "utf-8"; /* CSS Document */ div.wrapper { border: 1px solid; width: 100%; height: 100%; } div.top { border: thick; margin: auto; margin-top: 10px; width: 62.5%; height: 75px; } div.logo { background-image: url("../image/logo_bg_transp.png"); width: 362px; height: 80px; margin-top: 10px; } div.bar { background-color: #006699; margin: medium; border-radius: 5px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; margin: auto; width: 67.5%; height: 37.5px; padding: 15px; } div.main { border-radius: 5px; box-shadow: rgba(0, 152, 153, 0.2) 0px 2px 8px 0px; margin-top: 35px; margin: auto; width: 66.5%; height: 548px; padding: 10px; } div.menu { border: dotted; margin-top: 35px; margin-left: 15px; width: 200px; height: 400px; } div.footer{ } <!doctype html lang="en"> <html> <head> <link rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css'> <link href="css/main.css" rel="stylesheet" type="text/css"> <meta charset="utf-8"> <title></title> </head> <body> <div class="top"><div class="logo"></div></div> <div class="bar"></div> <div class="menu"></div> <div class="main"></div> <div class="footer"></div> </body> </html> Edited July 14, 2022 by LeonLatex Quote Link to comment Share on other sites More sharing options...
Barand Posted July 14, 2022 Share Posted July 14, 2022 One way <div> <div style='width: 30%; background:#FFC0C0; display: inline-block; padding:8px;'> Div 1 </div> <div style='width: 50%; background:#C0FFFF; display: inline-block; padding: 8px;'> Div 2 </div> </div> Quote Link to comment Share on other sites More sharing options...
LeonLatex Posted July 14, 2022 Author Share Posted July 14, 2022 Tthanks barry. I have tried that one, but ir's not working. I paste my css so you can watch it and maybe tell me whats wrong?, or what i'am doing wrong. div.main { display: inline-block; border-radius: 5px; box-shadow: rgba(0, 152, 153, 0.2) 0px 2px 8px 0px; margin-top: 35px; margin: auto; width: 66.5%; height: 548px; padding: 10px; } div.menu { display: inline-block; border: dotted; margin-top: 35px; margin-left: 15px; width: 200px; height: 400px; } Quote Link to comment Share on other sites More sharing options...
requinix Posted July 14, 2022 Share Posted July 14, 2022 Stop dealing with fractional measurements and relative percentages and switch to flex. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox Quote Link to comment Share on other sites More sharing options...
Barand Posted July 14, 2022 Share Posted July 14, 2022 57 minutes ago, LeonLatex said: I have tried that one, but ir's not working. It works if your screen width is >= 775 Quote Link to comment Share on other sites More sharing options...
LeonLatex Posted July 14, 2022 Author Share Posted July 14, 2022 I am used to that. Hard to get rid of it. But I will try 😊👍 Quote Link to comment Share on other sites More sharing options...
LeonLatex Posted July 14, 2022 Author Share Posted July 14, 2022 13 minutes ago, Barand said: It works if your screen width is >= 775 My screen resolution is 1920X1080 But is there a difference if I got your CSS inline or in an external file? Quote Link to comment Share on other sites More sharing options...
LeonLatex Posted July 14, 2022 Author Share Posted July 14, 2022 Msybe it is like Requinix says i have to move away from % and learn to use flex. Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted July 15, 2022 Share Posted July 15, 2022 14 hours ago, LeonLatex said: My screen resolution is 1920X1080 Keep in mind that the 775 (pixels) mentioned by Barand is more than just your monitor's resolution. I also have a monitor with 1920x1080 resolution. When my Chrome browser window is maximized, for example, the window width is 1920 pixels. If you happen to have any browser side panels open, the browser width will be less. The other thing that might be causing an issue with the percentage layout breaking is your browser zoom level. When my browser window is maximized (1920px wide) and the zoom level is set to 100%, I see 2 columns when testing your CSS code. However, if I bump that zoom level to 300%, the menu column gets shoved to the bottom of the page. Quote Link to comment Share on other sites More sharing options...
LeonLatex Posted July 15, 2022 Author Share Posted July 15, 2022 I am aware of that. But thanks for the tip any way 🙂 My browser's width is maximised and without any side panels. Open or not, I don't have any shit like that in my browser since I hate things like that. Quote Link to comment Share on other sites More sharing options...
LeonLatex Posted August 2, 2022 Author Share Posted August 2, 2022 But what if these two DIV's is inside a DIV? Quote Link to comment Share on other sites More sharing options...
LeonLatex Posted August 2, 2022 Author Share Posted August 2, 2022 After a long-awaited night's sleep, I reassembled the entire DIV stack with CSS. Then it was all right. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.