Chrome: Automatic shift of web elements

Question

I\'m working on a web project. In the last two weeks I was having my semester examinations so I\'d to take a break from it. Now, since they are over, I\'ve resumed my work;

Answer 1

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.

Answer 2

This is to due the headline change in Chrome 37 ,the introduction of DirectWrite support for Windows. Check this link for further details:

http://www.omgchrome.com/google-chrome-37-arrives-improved-font-rendering-windows/

This feature has caused a similar issue for various developers.

In order to restore to your previous font, the solution is to disable this new feature in your browser. You need to follow the following steps:

---

1> Enter chrome://flags/ in your address bar.

2> In the Disable DirectWrite Windows section click on Enable (actually disables it).

3> Click on Relaunch Now at the bottom.

4> Restart your browser.

---

Your original page design remains unchanged. :)