Salve a tutti, seguendo un post sto creando un layout che dovrebbe essere così strutturato:

Topmenu (largo quanto tutta la pagina)

colonna sinistra sempre fissa (finto frame) con altri 3 div al suo interno

contenuti

footer (largo quando tutta la pagina)

Per il file html sto usando:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="it">

<head>
<title>Colonna sinistra fissa: per IE 5 Windows e superiore</title>

<meta http-equiv=Content-Type content="text/html; charset=utf-8">

<style type="text/css" media="screen">@import url(stile.css );</style>

<!--[if IE]>
<link href="stileie.css" media="screen" type="text/css" rel="stylesheet" />
<![endif]-->

</head>
<body>

<div id="topmenu">topmenu</div>

<div id="content">
contenuti scroll </p>
</div>

<div id="menusx">
<div id="sx1">sx1</div>
<div id="sx2">sx2</div>
<div id="sx3">sx3</div>
</div>

<div id="footer">Footer</div>
</body>
</html>

il css invece è il seguente:

body {
margin: 0;
padding: 0 0 0 15em;
background: #fff;
font-size: .9em;
font-family: "trebuchet ms", trebuchet, georgia, verdana;
}

#topmenu {
height: auto;
width: 100%;
position: fixed;
background-color: #03F;
padding-left: 10px;

}

#menusx{
overflow: auto;
height: 100%;
width: 15em;
position: absolute;
top: 0;
left: 0;
color: #000;
background: #e5e5e5;
margin: 0;
padding-left: 10px;
}

#menusx h2{
margin:0;
padding:5px 0 5px 10px;
font-size:1.3em;
color:#f60;
}

#content {
padding-top: 20px;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 1em;
}

#content h1 {
margin:0;
padding: 0 0 5px 15px;
font-size:2em;
color:#f60;
}

#footer {
height: auto;
width: 100%;
background-color: #C36;
padding-left: 10px;
}

p{
margin:0;
padding:5px;
}


@media screen
{
body>div#menu
{
position: fixed;
padding-left: 10px;
}

Vorrei estendere sia il topmenu (in alto) a piena pagina, sia il footer in basso.
Ho provato in diversi modi ma entrambi restano sempre all'interno del content.

Un aiutino???
Grazie a tutti!
SW