I have been developing applications using PhoneGap however the app looks different on each device i.e buttons are in different places. DIVs are bigger than they're meant to be. So I was wondering which route do I have to take to make the UI look the same on all devices. Do I have to do native coding? Or maybe use something like Titanium and ditch PhoneGap. I couldn't find any answer anywhere else which Is why I came here.
EDIT #1:
My biggest flaw is design, so which is the best option for me? One which requires less design and more logic based coding?
PhoneGap however the app looks different on each device
This is were the power of Mobile UI frameworks come into play. The Mobile UI frameworks ( Dojo Toolkit, Sencha Touch, Ionic, Kendo UI and many more) help you to develop apps that mimic/impersonate the Mobile device.
These frameworks will have themes ( Android theme, Iphone theme, Blackberry theme, Windows theme..) prebuilt into their framework. This themes allow you to style your application with the native look and feel. You need to just apply the themes ( importing the relevant css file in most cases) and you get the desired theme.
Have look over here for themes available in Dojo toolkit over here and here. similarly there are themes available in other Mobile UI frameworks.
DIVs are bigger than they're meant to be. So I was wondering which route do I have to take to make the UI look the same on all devices.
The most importing thing that Mobile UI frameworks help apart from look and feel is dealing with Browser inconsistencies. There are number of browsers ( Chrome mobile, Safari, IE, Opera and many more) which have their own way of doing things.
The mobile UI frameworks help you in dealing with these inconsistencies, without you reinventing the wheel. They will provide APIs that internally deal with these inconsistencies and you do not have to bother about it.
Hope I am making sense over here.