Hey there, I'm having trouble posting an image but here is the link:
I believe this explanation will be clearer,
D2, D3 & D4 need to be aligned next to each other and centered on the screen at all times. (960px)
D2-680px, D3-10px, D4-270px (all three together & must be centered on the screen)
D1 and D5 should adjust according to the screen width.
Moreover, if the user's browser width exceeds 1200px, D1 will also come into play.
Only a D5 is included here for centering purposes (mainly because my thinking is still based on tables. D5 might not actually be utilized.)
To provide a better understanding, I have developed a sticky notes app that I intend to add to the site. Ordinarily, all notes must remain within the 680 div, but if the browser is 1200px wide, I want to enable users to place them in the left column (D1) as well.
My workaround plan involves centering the three columns with the code specified above (within the 960 area)...and then adding a layer of div(D1) if the browser-width is at least 1200px. [My calculation for the d1 layer width would be (browserWidth-960/2)].
<style>
BODY {margin:0px;padding:0px;}<BR>
#container {width:960px;margin-left:auto;padding:0px;margin-right:auto;height:60px;}<BR>
#dx {width:690px;}<BR>
#d2 {background-color:#ff0000;margin:0px;padding:0px;width:680px;height:60px;}<BR>
#d3 {background-olor:#00ff00;margin:0px;padding:0px;width:10px;height:60px;float:right;}<BR>
#d4 {background-color:#0000ff;margin:0px;padding:0px;width:270px;height:60px;float:right;}<BR>
</style>
<div id="container"><BR>
<div id="d4"><BR>
<BR>
</div><BR>
<div id="dx"><BR>
<div id="d3"><BR>
<BR>
</div><BR>
<div id="d2"><BR>
<BR>
</div><BR>
</div><BR>
In simple terms, I cannot make changes to the 960 area (as it represents the site), but if their screen is wide enough, I also want to offer the option of placing stickys in the left side column (D1).