Question

Its not letting me post an image but here it is if you can see this: http://i49.photobucket.com/albums/f272/huntmur/DIV-QUES.gif

I think this will be more clear,

D2,D3 & D4 have be 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 screen)


D1 and D5 must adjust according to the screen width.



Also, if the users browser width is greater that 1200px, the D1 will also be used.



Ive only included a D5 here for centering purposes (because unfortunately I am only thinking
in terms of tables. D5 wont really be used.)

To help you understand better, I have a sticky notes app I wrote and want to put on the site. Normally all notes have to stay inside the 680 div but if their browser is 1200px I
want to allow them to put them in the left column(D1) as well.

So what I was thinking of doing(as a work around) is centering the three columns with the code I have above (the 960 area)..and, I would just layer on a div(D1) if the browser-width is 1200px at least. [My calc 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>
   &nbsp;<BR>
  </div><BR>
  <div id="dx"><BR>
      <div id="d3"><BR>
       &nbsp;<BR>
      </div><BR>
      <div id="d2"><BR>
       &nbsp;<BR>
      </div><BR>
  </div><BR>

In other words, I can’t mess with the 960 area (as that’s the site) but if their screen is wide enough, I also want to let them put the stickys on the left side column(D1) as well.

Answer 1

I don’t think either of these ideas is exactly what you wanted, but hopefully one of them is close enough.

Idea #2: http://jsfiddle.net/DXmLE/

HTML:

<div id="container">
    <div id="d1">d1</div>
    <div id="d2">d2</div>
    <div id="d3">d3</div>
    <div id="d4">d4</div>
    <div id="d5">&nbsp;</div>
</div>

CSS:

html, body {
    margin: 0;
    padding: 0
}
#container {
    width: 100%;
    display: table;
    table-layout: fixed
}
#container > div {
    display: table-cell;
    height:60px
}
#d1, #d5 {
    overflow: hidden
}
#d2 {
    background-color: #f00;
    width: 680px
}
#d3 {
    background-color: #0f0;
    width: 10px
}
#d4 {
    background-color: #00f;
    width: 270px;
}

Idea #1: http://jsfiddle.net/PnujB/

If either of those are acceptable, I will update my answer with the corresponding HTML/CSS.