Ayuda centrado div simple HTML

Archivado
Hola!

Estoy empezando con esto del HTML, y quiero meter todo el contenido de la web en un DIV que esté centrado todo el rato, pero quiero que el DIV me llegue hasta abajo, sin tener que poner la medida en pixeles, ya que la altura de la ventana puede variar.

tengo lo siguiente en el css

#container
{
    width: 925px;
    position: relative;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    border:2px;
    border-radius:25px;
    padding: 10px;
}


y se me queda así el container:

Imagen

pero quiero que me llegue hasta abajo.

¿Cómo lo hago?
html, body { height: 100%; }

y le añades esto a contenedor:

height: 100%

De todos modos, según vayas llenando la capa con contenido, la capa contenedor aumentará sola si no especificas nada.
gracias por la ayuda, pero eso no me hace nada, bueno si, me mueve el contenedor un poco a la izquierda [buuuaaaa]

alguna otra cosa?
pega el html y el css

De todos modos, lo que tienes que controlar, ya lo haces con la anchura.

Si dentro del contenedor metes una capa, no sé estilo menú lateral, por ejemplo, y le das una altura de 300px la capa contenedor va a coger ese valor más los márgenes. Creo recordar...

Prueba position: fixed o position: absolute en la capa contenedor...

Esto de no practicar se le olvida a uno todo!
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" >
        <title>Prueba</title>
        <link rel="StyleSheet" href="css/style1.css" type="text/css">
    </head>
    <body>
        <div id="container">
            <h1>Hola</h1>
        </div>
    </body>
</html>


CSS
*
{
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 12pt;
}

html, body { height: 100%; }

body
{
    background-color: #bdd0cc;
}

#container
{
    width: 925px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    border:2px;
    border-radius:25px;
    padding: 10px;
}
Cenutrio, no has puesto en container height: 100%!!!

#container
{
width: 925px;
height: 100%;
position: relative;
margin-left: auto;
margin-right: auto;
background-color: white;
border:2px;
border-radius:25px;
padding: 10px;
}
dios, muchas gracias! ya está solucionado!
Nada hombre, en lo que te pueda ayudar, me dices, así repaso conceptos.
Vuelvo a la carga, el container se me queda pequeño si el tamaño de ventana es pequeño, solucionable?

Imagen


html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" >
        <title>asd</title>
        <link rel="StyleSheet" href="css/style1.css" type="text/css">
    </head>
    <body>
        <div id="container">
            <ul id="menua">
                <li><a href="gaz_index.html">Inicio</a></li>
                <li id="hemenzaude"><a href="gaz_ikasturtea.html">Curso 13/14</a></li>
                <li><a href="gaz_uda.html">Verano 2013</a></li>
                <li><a href="gaz_loturak.html">Enlaces</a></li>
            </ul>
            <div id="hizkuntza">
                <a href="ikasturtea.html">Euskara</a>
                <a class="hizkuntzahau" href="gaz_ikasturtea.html">Castellano</a>
            </div>
            <div id="eskuina">
                <div id="logoak"><a href="index.html"><img src="./images/asd.jpg" alt="asda"></a> </div>
                <div id="logoak"><a href="http:///"><img src="./images/ha.jpg" alt="as"></a> </div>
                <div id="logoak"><a href="http:/"><img src="./images/ip.jpg" alt="as"></a> </div>
                <div id="logoak"><a href="http:.html"><img src="./images/oa.jpg" alt="ds"></a> </div>
                <div id="info">
                    <p class ="non">¿Dónde estamos?</p>
                    <p>sad</p>
                </div>
            </div>
            <div id="datuak">
                <table id="taula">
                    <thead>
                        <tr>
                            <td>CURSO</td>
                            <td>DURACÍON</td>
                            <td colspan="2">HORARIOS</td>
                            <td>PRECIO</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td rowspan="6">2 HORAS AL DIA</td>
                            <td rowspan="5">330 horas</td>
                            <td rowspan="3">Mañana</td>
                            <td>08:00 - 10:00</td>
                            <td rowspan="5">759 euros</td>
                        </tr>
                        <tr>
                            <td>10:00 - 12:00</td>                       
                        </tr>
                        <tr>
                            <td>12:00 - 14:00</td>                       
                        </tr>
                        <tr>
                            <td rowspan="2">Tarde</td>
                            <td>15:30 - 18:00</td>                       
                        </tr>
                        <tr>
                            <td>18:00 - 20:30</td>                       
                        </tr>
                        <tr>
                            <td>217,5 horas</td>
                            <td colspan="2">(A partir de Enero)</td>
                            <td>500 euro</td>
                        </tr>
                        <tr>
                            <td rowspan="4">3 DIAS A LA SEMANA<br>
                            Nivel 1 - lu, ma, mi<br>
                            Nivel 2 - ma, mi, ju<br>
                            Nivel 3 - lu, mi, vi
                            </td>
                            <td rowspan="3">255 horas</td>
                            <td>Mañana</td>
                            <td>10:00 - 12:30</td>
                            <td rowspan="3">600 euros</td>
                        </tr>
                        <tr>
                            <td rowspan="2">Tarde</td>
                            <td>15:30 - 18:00</td>
                        </tr>
                        <tr>
                            <td>18:00 - 20:30</td>
                        </tr>
                        <tr>
                            <td>167,5 horas</td>
                            <td colspan="2">(A partir de Enero)</td>
                            <td>402 euros</td>
                        </tr>
                        <tr>
                            <td rowspan="3">2 DIAS A LA SEMANA<br>
                            Nivel 4 - ma, ju</td>
                            <td rowspan="3">165 horas</td>
                            <td>Mañana</td>
                            <td>10:00 - 12:30</td>
                            <td rowspan="3">512 euros</td>
                        </tr>
                        <tr>
                            <td rowspan="2">Tarde</td>
                            <td>15:30 - 18:00</td>
                        </tr>
                        <tr>
                            <td>18:00 - 20:30</td>
                        </tr>
                        <tr>
                            <td>PREPARACIÓN ORAL</td>
                            <td>120 horas</td>
                            <td>Mañana</td>
                            <td>10:00 - 12:30</td>
                            <td>282 euros</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>

css
*
{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 14px;
}

html, body
{
    height: 100%;
}

body
{
    background-color: #bdd0cc;
}

img {
   border: 0;
}

#container
{
    width: 925px;
    height:  calc(100% - 40px);
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    border:2px;
    border-radius:25px;
    padding: 10px;
}

#eskuina{
    float: left;
    width: 20%;
    height: 250px;
    margin: 0px;
    margin-right: 1%;
   
}

#datuak {
    width: 75%;
    text-align: justify;
    float:right;
    margin-bottom: 40px;
    padding: .25em 1em;
}
#logoa{
    float: left;
}

#info{
    font-size: 10pt;
}

#edatuak{
    float: left;
    text-align: left;
    margin-left: 5px;
}

#logoak{
    background:url(images/bg.png) repeat-x top left;
    margin-top: 2px;
}

#menua {
    width: auto;
    float: right;
    padding: 0;
    margin-right: 28%;
    margin-bottom: 5px;
    background-color: #039;
    color: #fff;
}

#menua li {
    display: inline;
}

#menua li a {
    padding: .25em 1em;
    background-color: #bdd0cc;
    color: #fff;
    text-decoration: none;
    float: left;
    border-bottom: solid 1px #fff;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
}

#menua a:link, a:visited {
    color: #fff;
   
}

#hizkuntza {
    position: absolute;
    top:16px;
    right:0px;
    padding: 5px;
    margin-top: 10px;
    margin-right: 10px;
    background-color: #bdd0cc;
}
#hizkuntza a:link, a:visited{
    color: white;
    text-decoration:none;
}

.hizkuntzahau{
    background-color: #046254;
}

.non{
    color: #046254;
    font-size: 15pt;
    font-weight: bold;
}

#menua li a:hover {
    color: #046254;
    background-color: #86B4AD;
   
}

#menua li#hemenzaude a {
    background-color: #046254;
}

#menua li#hemenzaude a:hover {
    color: white;
}



#lista{
   
}

p.handitu{
    color: #046254;
    font-size: 20pt;
}

#mapa{
    text-align: center;
}

#taula
{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    background: #fff;
    margin-top: 45px;
    width: 100%;
    border-collapse: collapse;
    text-align: center;
   
}
#taula th
{
    font-size: 14px;
    font-weight: normal;
    color: #039;
    padding: 10px 8px;
    border: 2px solid #bdd0cc;
}
#taula td
{
    border: 1px solid #bdd0cc;
    color: #046254;
    padding: 6px 8px;
}
8 respuestas
Archivado
Volver a General