How to correctly mark up the header for responsive design + rubber?

Question

Adaptive design

Marked in the screenshot 4 parts, how to correctly draw the width? I think it would be right to set the logo and slogan together 50% and the search form 50%. Or is it better to break it into 4 parts, but then the 3rd part will be empty. If you do not set the width in %, but simply retreat the padding, then there will be problems with adaptation in the future. How to do it right?
And the menu below will be more correct to set the width to 100%?

Answer 1

At this stage, you can prescribe all three blocks width:auto;
Logo and slogan float:left;. Search float:right;
Menu set clear:both; width:100%
I do not pretend to be true. It's just what I would do. IMHO.
And then, in media queries, decide what to do with them.