Meter un DIV dentro de otro DIV

[varuk]

Hola.

Tengo este código CSS que lo que hace es que crea una tabla grande (#header_menu) y dentro creo 4 tablas pequeñas. El caso es que cuando hago que la tabla grande, la de color rojo en la foto, tenga una altura menor, reduzco el height, las que están dentro no se "van" con ella, sino que se quedan donde están. Con este dibujo lo vais a ver mejor:

Código:

#header_menu {
    width: 700px;
    height: 50px;
    float:right;
    margin-top: 0px;
    font-size:25px;
    background:#ff0000;}
    
#header_menu a:link {text-decoration:none;}
#header_menu a:visited {text-decoration:none;}
#header_menu a:hover {color: #FFF;}
#header_menu a:active {text-decoration:none;}

    
#header_menu_inicio {
    width: 100px;
    height: 50px;
    position:absolute;
    margin-top: 50px;
    padding: 20px 0px 0px 50px;
    background: url('../img/icono-inicio.png') no-repeat;
    }
    
    
#header_menu_contacto {
    width: 100px;
    height: 50px;
    position:absolute;
    margin-top: 60px;
    margin-left: 135px;
    padding: 10px 0px 0px 55px;
    background: url('../img/icono-contacto.png') no-repeat;
    }
    
#header_menu_cuenta {
    width: 150px;
    height: 50px;
    position:absolute;
    margin-top: 50px;
    margin-left: 315px;
    padding: 20px 0px 0px 52px;
    background: url('../img/icono-cuenta.png') no-repeat;
    }
    
#header_menu_carrito {
    width: 150px;
    height: 50px;
    position:absolute;
    margin-top: 50px;
    margin-left: 500px;
    padding: 20px 0px 0px 52px;
    background: url('../img/icono-carrito.png') no-repeat;
    }

El código de la página es

Código:

<div id="header_menu">
					<div id="header_menu_inicio">
					<a href="index.php">Inicio</a>
					</div>
					<div id="header_menu_contacto">
					<a href="contact-form.php">Contacto</a>
					</div>
					<div id="header_menu_cuenta">
					<a href="my-account.php">Mi cuenta</a>
					</div>
					<div id="header_menu_carrito">
					<a href="order.php">Carrito</a>
					</div>
				</div>

¿Por qué si encojo la tabla roja no se mueven los demás elementos hacia arriba con ella?

[daPhyre]

Todos comienzan en el mismo lugar, por lo que la altura no influye. Eso sería el margin-top de la mayor y de cada una. Suerte

[jomaruro]

Hola:

Sin la URL de tu página o en su defecto el código completo, me inclino a pensar que el problema es que todos los header_menu_xxx estan en position:absolute, entonces puede estar tomando la posición desde el borde del navegador.

Pero, como dice Kseso?, con esta información son sólo cábalas.

Saludos.

[rb3m]

agrégale un position:relative a #header_menu y quítale el float: right.

Los elementos con posición absoluta agarran su posición a partir del último elemento dentro de sus padres declarado como relativo. Si no encuentran ninguno agarran su posición del body, y creo que eso es lo que está pasando aquí.

[varuk]

Muchas gracias a todos por contestar, aunque no se ha arreglado.