margin-top div interno ad un altro div

**starbuck** · 20-03-2013, 10:54

Ho un piccolo problema nel posizionare un div all'interno di un altro, ho un footer che contiente un altro div che vorrei posizionare da metà in giù del footer, ho provato ha mettere un margin-top sul div interno per staccarlo dal bordo superiore del footer (contenitore) ma il div risulta sempre incollato al margine superiore….

codice:

#footer{
width:980px;
height:213px;
margin-left:auto;
margin-right:auto;
background: transparent url("../images/footer.jpg") top left no-repeat;
border-bottom:20px solid white;
border-top:1 px solid transparent;
}


#by{
width:300px;
height:auto;
border:1px dotted pink;
background-color:white;
margin-left:auto;
margin-right:auto;
margin-top:3em;
}

Il div by è interno al footer

**fcaldera** · 20-03-2013, 10:56

invece del margin-top su #by usa un padding-top di 3em sul #footer

**starbuck** · 20-03-2013, 14:43

Originariamente inviato da fcaldera
invece del margin-top su #by usa un padding-top di 3em sul #footer

Ma così facendo mi si alza di 3 em anche il footer rispetto al container che lo contiene

**starbuck** · 29-03-2013, 11:08

Qualche soluzione alternativa?

**pascalman** · 29-03-2013, 12:36

Ok, dovrebbe andare:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#footer{
width:980px;
height:213px;
margin-left:auto;
margin-right:auto;
background: transparent url("../images/footer.jpg") top left no-repeat;
border-bottom:20px solid white;
border-top:1 px solid transparent;

background-color: #f00; /*    l'ho messo solo per fare il test, rimuovilo */
position: relative;
}

#by{
width:300px;
height:auto;
border:1px dotted pink;
background-color:white;
/*margin-left:auto;
margin-right:auto;
margin-top:3em;*/

position: absolute;
bottom: 0px;
left: 340px; /*         = (980px - 300px) / 2          */ }
</style>
</head>

<body>
	<div id="footer">
		test
		<div id="by">
			altro test
		</div>
	</div>
</body>
</html>

**starbuck** · 29-03-2013, 15:32

Originariamente inviato da pascalman
Ok, dovrebbe andare:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#footer{
width:980px;
height:213px;
margin-left:auto;
margin-right:auto;
background: transparent url("../images/footer.jpg") top left no-repeat;
border-bottom:20px solid white;
border-top:1 px solid transparent;

background-color: #f00; /*    l'ho messo solo per fare il test, rimuovilo */
position: relative;
}

#by{
width:300px;
height:auto;
border:1px dotted pink;
background-color:white;
/*margin-left:auto;
margin-right:auto;
margin-top:3em;*/

position: absolute;
bottom: 0px;
left: 340px; /*         = (980px - 300px) / 2          */ }
</style>
</head>

<body>
	<div id="footer">
		test
		<div id="by">
			altro test
		</div>
	</div>
</body>
</html>

Ok...perfetto con il posizionamento assoluto funziona

Discussione: margin-top div interno ad un altro div

Strumenti discussione

Ricerca discussione

Visualizza

margin-top div interno ad un altro div

Permessi di invio