Hola:
Yo pondría el código CSS como sigue, aunque no se si es eso lo que quieres:
Código:
body {
width: 100%;
height: 100%;
background: url(img/line_top.png) repeat-x top;
margin: 0 auto;
}
a {
color: #999;
}
a:hover, a:visited {
color: #009;
text-decoration: underline;
}
#contenedor {
width: 100% !important;
height: 100% !important;
}
#header {
width: 100%;
height: 70%;
}
#logo {
width: 25%;
height: 150px;
margin: 0 10px 10px 10px;
}
#header_primario {
color: #000;
width: 61%;
height: 100px;
margin: 0.3em 0 0 0;
padding: 25px 5px 5px 20px;
position: absolute;
left: 320px;
top: 13px;
}
/* Botonera Principal */
#header_primario ul {
text-align: center;
list-style-type: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
width: 650px;
}
#header_primario ul li {
list-style-type: none;
margin: 8px 10px 0 10px;
float: left;
height: 25px;
text-align: center;
font-size: 1.5em;
}
#header_primario ul li a {
color: #999;
text-decoration: none;
}
#header_primario ul li a:hover {
color: #000;
background-image: url(img/btn_back.png);
}
#header_primario ul li a:active {
background-image: url(img/btn_back.png);
}
/* Fin botonera principal */
#header_secundario_a {
width: 646px;
height: 322px;
background: url(img/logo_header2.png) no-repeat;
margin: 0pt auto;
padding: 10px 0pt 20px;
}
#header_secundario {
margin: 0;
padding: 7px 0 0 5px;
height: 50px;
background: url(img/Subtitle.png) repeat-x;
clear: both;
overflow: auto;
font-size: 2em;
text-align: right;
color: #004A00;
}
#columnas {
width: 980px;
/*margin: 0 0 20px 0;*/
margin: auto;
}
#columna1 {
float: left;
width: 700px;
margin: 20px 0 20px 0;
padding: 10px;
overflow: auto;
border: 1px solid #000;
}
#columna1 p {
font-size: 1.2em;
color: #333;
text-align: justify;
margin: 2px solid red;
}
.columna1_titulos {
border-bottom: 1px dashed #999;
font-size: 1.3em;
}
.columna1_tablas {
text-align: center;
}
#columna2 {
float: right;
width: 200px;
margin: 20px 0 20px 0;
padding:10px;
border: 1px solid #000;
overflow: auto;
}
#columna2 ul {
list-style-image: url(img/list_style_image.png);
margin: 10px 0 0 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
border-bottom: 1px solid #ccc;
}
#columna2 ul li {
list-style-image: url(img/list_style_image.png);
height: 25px;
font-size: 1em;
text-decoration: none;
padding-left: 5px;
}
#columna2 ul li a {
list-style-image: url(img/list_style_image.png);
color: #666;
text-decoration: none;
}
#columna2_cuerpo ul a:hover, a:visited {
color: #009;
text-decoration: underline;
}
.columna2_titulos {
width: 200px;
margin: 0 0 20px 0;
border-bottom: 1px dotted #666;
}
#footer {
background: url(img/foot.png) repeat-x;
height: 150px;
clear: both;
margin: 20px 0 -30px -1px;
width: 100%;
}
#footer_col1 {
float: left;
width: 400px;
height: 90%;
padding: 10px 0 0 10px;
}
#footer_col2 {
width: 300px;
height: 50px;
padding: 10px 0 0 10px;
position: absolute;
top: 400px;
left: 650px;
display: none;
}
.foot_links {
text-align: center;
color: #FFF;
}
.foot_links a {
color: #FFF;
text-decoration: none;
}
.foot_links a:hover, a:active {
text-decoration: overline;
}
.reset {
clear:both;
}
y en el HTML:
añadiría:
Código:
<div class="reset"></div>
despues de cerrar el div columna2 y antes de cerrar el div columnas.
Saludos.