- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Centrare un div
-
Centrare un div
Salve a tutti, ho un problema che sicuramente sapete risolvere.
Intanto partiamo con il dirvi che io sono alle primissime armi sia in CSS che in HTML, ma studiando qualcosa sta uscendo fuori...
Il mio problema è il seguente:
[html]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color:#CCC;
}
#wrapper {
margin:20px auto ;
width:960px;
background-color:#FFF;
}
#header {
width:960px;
height:90px;
padding-top:5px;
}
#logo {
float:left;
width:220px;
}
#numero {
float:left;
width:740px;
text-align: right;
}
#menu-up {
float:left;
width:740px;
height:40px;
}
ul {
list-style-type:none;
margin:0;
padding:0;
}
ul li {
display:block;
float:right;
}
{
width:960px;
height:52px;
background-color:#F00;
float:left;
}
#content {
float: left;
width: 960px;
height: 100px;
}-->
</style>
</head><body>
<div id="wrapper">
<div id="header">
<div id="logo"><img src="image/logo.gif" /></div>
<div id="numero"><img src="image/numero.gif" /></div>
<div id="menu-up">
<ul>
<li><a class="chi" href="#">Chi siamo</a></li>
<li><a class="dove" href="#">Dove siamo</a></li>
<li><a class="job" href="#">Lavora con noi</a></li>
<li><a class="login" href="#">Login</a></li>
<li><a class="trasp" href="#">Trasparenza</a></li>
<li><a class="cont" href="#">Contatti</a></li>
</ul>
</div>
<div id="menu"></div> <!-- fine menu -->
</div> <!-- fine header -->
<div id="content"></div>
</div> <!-- fine wrapper -->
</body>
</html>[/html]Il div "wrapper" è quello che dovrebbe centrare tutto il sito, ma il problema è nella lunghezza di questo, se io vado ad aggiungere il div content, questo va a posizionarsi sotto al wrapper ma no dentro, questo comporta il mancato riempimento del sudetto con il background del wrapper.Come devo fare?
-
Togli float: left al div content. Inoltre non vincolerei l'altezza del content a 100px.
-
si potrebbe anche tentare un
#wrapper {
overflow: hidden;
}
o al limite overflow: auto;
-
Appena dopo la fine del div content metti un meraviglioso:
<div style="clear:both"></div>