Chrome: Automatic shift of web elements

by

Hello and welcome to the community!

First off, in your provided link the -webkit-margin-start: of the button is set to 620px, not 166.
That, combined with the width of your menu div <div id="div_element"> as well as the padding around your elements exceeds your original #wrapper width of 1006px, making the button element jump to the next row.

Here’s a demo to a top-of-my-mind solution: http://jsfiddle.net/kqxmbcdt/
Reduce the -webkit-margin-start: to 619px and you’re good to go.

Always be on the lookout for unaccounted margins and paddings when positioning elements, as you can see, sometimes 1px is all it takes to break a layout.

More Related Contents:

  1. html/css empty space at bottom of the website
  2. How can i achieve this style in Html/Css?
  3. Hide scroll bar, but while still being able to scroll
  4. Google Chrome form autofill and its yellow background
  5. How to save CSS changes of Styles panel of Chrome Developer Tools?
  6. Favicon not showing up in Google Chrome [duplicate]
  7. Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)
  8. Google Fonts are not rendering on Google Chrome
  9. Chrome rendering issue. Fixed position anchor with UL in body
  10. Turn off Chrome/Safari spell checking by HTML/css [duplicate]
  11. Prevent “overscrolling” of web page
  12. Stop CSS transition from firing on page load
  13. canvas default size
  14. Chrome does not expand flex parent according to children’s content [duplicate]
  15. Prevent scroll-bar from adding-up to the Width of page on Chrome
  16. How can you hide the arrow that is displayed by default on the HTML5 element in Chrome?
  17. Different implementation of Flexbox in Firefox and Chrome
  18. chrome/safari display border around image
  19. text-decoration not working for visited state link
  20. 100vh height when address bar is shown – Chrome Mobile
  21. number input – always show spin buttons
  22. Select size attribute size not working in Chrome/Safari?
  23. Two divs side by side – Fluid display [duplicate]
  24. Can I write a CSS selector selecting elements NOT having a certain class or attribute?
  25. Vertical Text Direction
  26. Why would margin not be contained by parent element?
  27. Why does CSS padding increase size of element?
  28. Centering floating divs within another div
  29. Detecting ‘transform: translate3d’ support
  30. Alternate background colors for list items

Leave a Comment