LeonLatex Posted April 15, 2023 Share Posted April 15, 2023 What I want to do now have i done before, but now I can't. I want logo_bar to be 100% wide from margin left to margin right. Now there is a gap on the right side. The 2nd. is the translate_div with the google translate inside. I want it to be aligned 20px from the right margin, but now it won't. Sure, I am doing something wrong, but after trying a lot of different things I give up. Can you see what I am doing wrong? <body> <div class="header_container"> <div class="logo_bar"> <div class="logo_div"> <div class="translate_div"> <div id="google_translate_element"></div> <script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element'); } </script> <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> </div> </div> </div> ---------------------------------------------------------------------- div.header_container { background-color: #033333; height: 83px; width: 100%; padding-top: 0px; margin-top: 0px; } div.logo_bar { display: flex; background-color: #033333; width: 100%; height: 47px; } div.logo_div { background-image: url("../images/logo_bg_original.png"); width: 300px; height: 35px; margin-top: 3px; } div.translate_div { display: inline; width: 300px; height: 35px; margin-left: 20px; } Quote Link to comment Share on other sites More sharing options...
kicken Posted April 15, 2023 Share Posted April 15, 2023 You are missing a </div> tag. I suspect for the logo_div, but can't be sure. Your translate div is currently a child of your logo div, which doesn't seem correct. You seem to make quite a bit of these basic HTML structure mistakes. You might want to see if you can get better help from your editor in spotting these, or spend more time proof reading your HTML code. For these types of questions, rather than just posting the code it would be preferable if you re-create the problem using something like JSFiddle and provide a link to that. This will make it easier to show what you're seeing and describe what you want instead. I copied your code into a fiddle and attempted to fix the HTML problem, but can't really be sure if the result is the same as what you're seeing. I'm not 100% sure I understand what you want either. My guess is you want the logo to be on the left, the translation widget 20px in from the right, with whatever extra space there is between the two. You can do that by setting justify-content: space-between; on the logo_bar, and margin-right: 20px; (not left) on your translate_div. Quote Link to comment Share on other sites More sharing options...
maxxd Posted April 16, 2023 Share Posted April 16, 2023 Yeah, your markup is a mess. Sorry to be blunt about it, but it's certainly not the first time it's been brought up. Apart from that, I highly recommend reading up on flexbox and grid. As kicken pointed out, you're missing a closing tag and it's difficult to say exactly which closing tag you're missing, but the layout as I read it simply won't work in the way you want with flex. I'm not quite sure I understand the layout you want - it looks like 2 divs side by side with a single div underneath that goes full width, maybe? This is achievable using flex, but could potentially be easier to do using grid. Either way, I'm belaboring a point because I'm a bit tired. Your markup is borked. Fix it, post it, and tell us what it is currently doing and what you want it to do. Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted April 18, 2023 Share Posted April 18, 2023 Note that the W3C validator can be a useful tool for fixing broken HTML code. Of course, it can take some time getting used to the various warnings and errors.https://validator.w3.org/ 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.