DIV acoplados

xmarkx · #1 (**permalink**) 18/04/2009, 02:39

Hola! Soy novatillo en esto del CSS. Y queria que me ayudaseis. Tengo un texto cualquiera, y 4 divs. La cabezera que es un div, y dspues tres divs que en teoria estan parte izquierda, central y derecha.

Pero al visualizarlo se me juntan todos, uno bajo el otro. Mirad, pongo codigo.

Código HTML:

<!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>Documento sin t&iacute;tulo</title>

<style>

body{
background-color:#DFDFBF


}
#1{
float:left;
width: 33.3%;
margin: 1px;

}
#2{
float:left;
width: 33.3%;
margin: 1px;

}
#3{
float:left;
width: 33.3%;
margin: 1px;

}
#cabezera{

width:100%;
margin-top: 5px;
margin-bottom:10px;
margin-left:0px
margin-right:0px;
padding:8px;

}

h1{
text-align:center;
text-font: Fantasy

}

#contenedor{
float: left;
margin: 0px;
padding: opx;

}


</style>


</head>

<body>

<h1>PRUEBA DE DIV</h1>

<div id="contenedor">
<div id="cabezera">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>

<div id="1">Aqui hay div 1 Lorem Ipsum is simply dummy text of the printing and  typesetting industry. Lorem Ipsum has been the industry's standard  dummy text ever since the 1500s, when an unknown printer took a galley  of type and scrambled it to make a type specimen book. It has survived  not only five centuries, but also the leap into electronic typesetting,  remaining essentially unchanged. It was popularised in the 1960s with  the release of Letraset sheets containing Lorem Ipsum passages, and  more recently with desktop publishing software like Aldus PageMaker  including versions of Lorem Ipsum.</div>
<div id="2">Aqui hay el div 2 There are many variations of passages of Lorem Ipsum available, but the  majority have suffered alteration in some form, by injected humour, or  randomised words which don't look even slightly believable. If you are  going to use a passage of Lorem Ipsum, you need to be sure there isn't  anything embarrassing hidden in the middle of text. All the Lorem Ipsum  generators on the Internet tend to repeat predefined chunks as  necessary, making this the first true generator on the Internet. It  uses a dictionary of over 200 Latin words, combined with a handful of  model sentence structures, to generate Lorem Ipsum which looks  reasonable. The generated Lorem Ipsum is therefore always free from  repetition, injected humour, or non-characteristic words etc.</div>
<div id="3">Aqui hay el div 3 The standard chunk of Lorem Ipsum used since the 1500s is reproduced  below for those interested. Sections 1.10.32 and 1.10.33 from &quot;de  Finibus Bonorum et Malorum&quot; by Cicero are also reproduced in their  exact original form, accompanied by English versions from the 1914  translation by H. Rackham.</div>
</div>
</body>
</html>

Muchas gracias!

YamilG · #2 (**permalink**) 18/04/2009, 03:26

Probé este en Firefox y corre bien, en lo personal no soy muy amigo de los porcentajes, prefiero los layout fixed, como consejo si vas a trabajar con procetaje, toma en cuenta todo el espaciado que agregás como márgenes o paddings.

Código HTML:

<style type="text/css" />
#contenedor {
	width:100%;
	margin:0 auto;
}

#cabecera {
		width:100%;
		background: red;
		clear:both;
		text-align:center;
}

#col1 {
		width:30.5%;
		background: yellow;
		float:left;
		padding:15px;
}

#col2 {
		width:30.5%;
		background: green;
		float:left;
		padding:15px;
}

#col3 {
		width:30.5%;
		background: orange;
		float:left;
		padding:15px;
}

#footer {
		width:100%;
		background:purple;
		clear:both;
}

</style>
</head>

<body>

<div id="contenedor"> 
<div id="cabecera"><h1>Titular Principal</h1></div>
<div id="col1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>
<div id="col2"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<div id="col3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>
<div id="footer"> <p>Footer regular</p></div>

</div>
</body>
</html>

xmarkx · #3 (**permalink**) 18/04/2009, 06:54

me puedes explicar en que fallami css? gracias

talmente · #4 (**permalink**) 18/04/2009, 12:09

Por que entre el padding y width suman más que el contenedor.

Pruba con esto:

Código:

#col1 {
	width:32%;
	background: yellow;
	float:left;
	padding: 1%;
}

#col2 {
	width:31%;
	background: green;
	float:left;
	padding: 1%;
}

#col3 {
	width:31%;
	background: orange;
	float:left;
	padding: 1%;
}