I have been stuck on this issue for quite sometime and still cannot figure it out. I do hope someone is willing to help me.
Please see the picture below for question clarity.
I would like to have the 1000px div aligned on the center of the page as seen in diagram 1.
However, at the same time, I would want to have div block 'A' and div block 'B' each aligned at each end of the page browser window.
When the user reduces the size of the browser window, the 1000px div will remain centered on the page, and the 2 other div blocks 'A' and 'B' will remain at each of the ends. (see diagram 2)
When the browser window is 'smaller' than all three, the div block 'A' , the 1000px centered div block and the div block 'B' will all remain in one line but of course portions of the div will only be visible depending on the size of the browser window.(see diagram 3)
How can this be achieved? I have spent countless hours and still cannot make this happen.
Thanks so very very much!