Divs consecutivos

manuxdjent · #1 (**permalink**) 29/11/2012, 10:47

Buenas , ¿Alguien me puede decir como poner un div al lado del otro? , es que quiero que el titulo "Noticias" , insertado en el div "news", esté al lado derecho del div "new" . Lo he intentado con float:left en el div "new" pero de esa manera no me aparece el fondo que le puse.

Código HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Ultimate Breath</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
<LINK rel="stylesheet" href="orbit-1.2.3.css">
<LINK rel="stylesheet" href="demo-style.css">
<SCRIPT type="text/javascript" src="jquery-1.5.1.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="jquery.orbit-1.2.3.min.js"></SCRIPT>
<SCRIPT type="text/javascript">
			$(window).load(function() {
				$('#featured').orbit();
			});
</SCRIPT>
<style>
@font-face{

font-family:ostrich-black;
src: url(fuentes/ostrich-black.ttf) format('truetype');

}

#menucontainer{
	margin:20px auto;
	width:600px;
	height:42px;
	background-color:rgba(0, 105, 131, 0.5);	
	
	font-family:ostrich-black;
	font-size:26px;
	border:1px solid grey;
	-webkit-border-radius:15px 0 15px 0;

	
}
#menu1{

	list-style:none;
	margin-top:8px;
	margin-left:-10px;
	
	
	

}
#menu1 li{


	float:left;
	


}
#menu1 li a{

	display:block;
	padding:0 10px;
	text-decoration:none;
	text-align:center;
	color:whitesmoke;


	-webkit-transition-property: all;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease;
    -webkit-transition-delay: 0.1s;

}
#menu1 li a:hover{

color:#00DCEC;
	

}
body{
background-image:url(background-1.png);
background-size:100%;	
}
#contenedor{
margin:0 auto;
width:950px;
border:8px solid rgba(0, 105, 131, 0.5);
}

#contenido{
width:966px;
margin:40px auto;
background-color:rgba(0, 105, 131, 0.5);

}
#new{
margin-left:20px;
padding-top:20px;
font-family:ostrich-black;
	font-size:26px;
	color:white;

}
#news{
margin:20px 475px;
font-family:ostrich-black;
	font-size:26px;
	color:white;
}
#album{
margin-left:20px;
padding-top:10px;

}
</style>

	
	<body>
	
		<DIV id="menucontainer">
			<UL id="menu1">
              <li><a href="#about">BAND</a></li>
              <li><a href="#contact">TOURS</a></li>
              <li><a href="#contact">ALBUMS</a></li>
              <li><a href="#contact">GALLERY</a></li>
              <li><a href="#contact">VIDEO</a></li>
              <li><a href="#contact">NEWS</a></li>
              <li><a href="#contact">CONTACT</a></li>
			 </UL>
		</DIV>
		


<DIV id="contenedor">
	
<DIV class="container">
	<div id="featured">
			
			<a href="https://soundcloud.com/ultimatebreath/ultimate-breath-exhumed-body" target="_blank"><img src="slider.png" /></a>
			<a href="https://soundcloud.com/ultimatebreath/ultimate-breath-exhumed-body" target="_blank"><img src="slider.png" /></a>
			


	</div>
		
</DIV>
		
</DIV>
<DIV id="contenido">
	<DIV id="new">
		New EP		
	</DIV>
	<DIV id="album">
	<IMG src="logo.jpg"/>
	</DIV>
	<DIV id="news">
	Noticias
	</DIV>
</DIV>
	</body>
	</html>

El enlace de la web :

http://tiendanueva.xtrweb.com/ultima...ew%20%202.html

Gracias y un saludo.

Trutxof · #2 (**permalink**) 29/11/2012, 12:34

Dales a ambos "div" la anchura que quieres que tengan. Después flotalos y ya deberia estar. Respecto a que no se ve el fondo, no entiendo bien...

manuxdjent · #3 (**permalink**) 29/11/2012, 12:47

Quiero decir que no se ve el fondo que le he puesto al div: background-color:rgba(0, 105, 131, 0.5); , al flotarlos se me anula el código del fondo del div "contenido"

Trutxof · #4 (**permalink**) 29/11/2012, 12:52

Ah ok, comprendo. Al flotar los elementos los sacas del "flujo del documento".

manuxdjent · #5 (**permalink**) 29/11/2012, 13:26

¿Como puedo hacer para que no se me vaya el fondo?

Trutxof · #6 (**permalink**) 29/11/2012, 13:30

Te recomiendo leer el enlace y ENTENDERLO.

pzin · #7 (**permalink**) 29/11/2012, 14:17

Yo usaría overflow:hidden en el elemento contenedor en vez del clearfix añadiendo elementos que no hacen falta al HTML como dicen en librosweb.

manuxdjent · #8 (**permalink**) 29/11/2012, 14:20

Gracias por las respuestas, al final he leido el enlace y con el overflow:hidden lo he entendido del todo. Ya lo he solucionado.
Un saludo.