Anzitutto devi sistemare il codice HTML, che sia semanticamente corretto:
codice:
<body>
<div id="tutto">
  <div id="header">
    <h1>TOSCOWINES<h1>
    <h2>Il nuovo modo di pensare il vino</h2>
    <ul id="menu">[*]home[*]chisiamo
      ...[/list]
  </div>

  <div id="corpo">
    <div id="toscano" class="colonna">
      <img ...>
      <h3>Il vino toscano...</h3>
      

Si dice Toscana ...</p>
    </div>
    <div id="confezioni" class="colonna">
      <img ...>
      <h3>Confezioni pratiche ...</h3>
      

ToscoWines ...</p>
    </div>
    <div id="sfuso" class="colonna">
      <img ...>
      <h3>IL nuovo modo ...</h3>
      

Allora, cosa ...</p>
    </div>
    <div id="brochure" class="mezzo">
      .....
    </div>
    <div id="contatti" class="mezzo">
      .....
    </div>
  </div>
</body>
Poi occorre dare una forma al tutto mediante i CSS:
codice:
html, body {
  font: 100%;
  width: 100%;
  bacground-color: ...; /* mattone carico */
  text-align: center;     /* solo per IE */
}
#tutto {
  margin: 5px auto;   /* centrare in browser standard, e lasciare bordo in alto e basso */
  text-align: left;
  background: white;  /* per fare le cornici bianche */
  width: ???;   /* vedi se darlo in % o in px */
}
#header {
  margin: 5px;   /* valore a caso: vedi tu quanto serve */
  background-color: ...; /* marron */
  background-image: url(...);  /* vigneti e ToscoWines */
}
h1 {
  margin-left: -1000px;    /* non visualizza titolo */
}
h2 {
  right: 0;
  font-size: 300%;
  color: white;
  background-color: ...; /* marron */
}

.colonna {
  width: 25%;
  margin: ...;
  float: left;
}
.mezzo {
  width: 48%;
  margin: ...;
  float: left;
}
...