due div allineati all'interno di un'altro div

Jakub Lemiszewski

Utente Attivo
5 Dic 2013
119
1
0
Salve,
Sto cercando di mettere due div allineati orrizontalmente all'interno di un altro. Il tutto poi deve essere centrato sullo schermo a ogni risoluzione e su questo anche vorrei un aiuto. Grazie e di seguito il codice:

HTML:
<!doc html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<title>Welcome</title>
	<link rel="stylesheet" href="../css/entrypg.css"> 
	<!-- CSS FINISH -->
</head>  

<body>
	<div class="main-container">
		<div class="child">
		<a href=""><img src="" alt="child"></a> 
		</div>
		<div class="parent">
		<a href="experimentarium.html"><img src="" alt="parent"></a> 
		</div>
	</div>
</body> 
</html>

Codice:
body{
margin: 0 auto;
padding:0;

}

.main-container {
	margin: 0 auto;	
	width: 80%;
	height: 80%;
	overflow: hidden;
	border: 2px black solid;
	margin-top: 5%;
	}

.child {
	clear: both;
	position: absolute;
	float: left;
	border: 2px yellow solid;
	width: 48%;
	height:auto;
}
.parent {
	position: absolute;
	float: left;
	border: 2px red solid;
	width: 48%;
	height: auto;
	top:0;	
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
}
 
HTML:
<div id="main">
   <div class="affianca">
      box3
   </div>
   <div class="affianca">
      box2
   </div>
</div>

CSS
Codice:
#main{
  position: absolute;
  width: 800px !important;
  height: 600px !important;
  top: 50%;
  margin-top: -300px; /* la metà dell' altezza */
  left: 50%;
  margin-left: -400px; /+ la metà della larghezza */
}

.affianca{
  float:left;
}
 
HTML:
<div id="main">
   <div class="affianca">
      box3
   </div>
   <div class="affianca">
      box2
   </div>
</div>

CSS
Codice:
#main{
  position: absolute;
  width: 800px !important;
  height: 600px !important;
  top: 50%;
  margin-top: -300px; /* la metà dell' altezza */
  left: 50%;
  margin-left: -400px; /+ la metà della larghezza */
}

.affianca{
  float:left;
}

Grazie ho provato ma me li mette uno sopra l'altro e io li voglio uno accanto all'altro in linea orizzontale.
 
a parte che è difficile aiutarti senza conoscere il "progetto"
non usare mai i posizionamenti assoluti se puoi evitare
HTML:
<div id="main-container">
		<a href=""><img src="http://tellmewhy84.files.wordpress.com/2010/10/prova.jpg" alt="child"></a>
		<a href="experimentarium.html"><img src="http://tellmewhy84.files.wordpress.com/2010/10/prova.jpg" alt="parent"></a>
	</div>
e il css
HTML:
#main-container {
    width:80%;
    margin: 0 auto
}
#main-container a {
  float:left;
    width:50%
}
#main-container a img {
	width: 100%
}
 
a parte che è difficile aiutarti senza conoscere il "progetto"
non usare mai i posizionamenti assoluti se puoi evitare
HTML:
<div id="main-container">
		<a href=""><img src="http://tellmewhy84.files.wordpress.com/2010/10/prova.jpg" alt="child"></a>
		<a href="experimentarium.html"><img src="http://tellmewhy84.files.wordpress.com/2010/10/prova.jpg" alt="parent"></a>
	</div>
e il css
HTML:
#main-container {
    width:80%;
    margin: 0 auto
}
#main-container a {
  float:left;
    width:50%
}
#main-container a img {
	width: 100%
}

Grazie, questo link http://s14module8in03.keaweb.dk/experimentarium/html/welcome.html ti porta al progetto che sto lavorando a scuola cosi puoi farti un'idea
 

Discussioni simili