Maquetación de cuadros

el_tigre · #1 (**permalink**) 24/03/2011, 12:21

Amigos estoy haciendo unas divisiones de 3 columnas y 3 filas, la primera fila me sale perfecto, pero la segunda no responde....¿dónde estoy fallando?...

Código CSS

Código PHP:

  #content-middle { padding: 0 25px 25px; background: url(../images/content-middle.gif) repeat-y; }

#content-bottom { clear: both; padding: 6px 0 7px; background: url(../images/content-bottom.gif) no-repeat left bottom; }

 
.column { float: left; width: 283px; margin: 0 40px 0 0; line-height: 2.2em; }

    .column.last { margin-right: 0; }

    .column img { padding: 10px; border: 1px solid #ddd; margin: 0 0 5px; }

    .more a { background: url(../images/bullet.gif) no-repeat 0 7px; padding: 0 0 0 8px; color: #672A6D; font-weight: bold; font-size: .9em; }

y esto es mi Html (ejemplo de 2 filas)......

Código HTML:

<div id="content-top"></div>
		<div id="content-middle">
			
		
			<div class="column" align="justify">
				<h3>NOSOTROS</h3>
				<img src="images/nosotros.gif" alt="nosotros" />
				<p>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</p>
				
		  </div>

			<div class="column" align="justify">
				<h3>VISION</h3>
				<img src="images/vision.gif" alt="vision" />
				<p>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</p>
				
			</div>	
			
			<div class="column last" align="justify">
				<h3>MISION</h3>
				<img src="images/mision.gif" alt="mision" />
				<p>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</p>
				
			</div>	
            
			<div class="column" align="justify">
				<h3>ESTRATEGIAS</h3>
				<img src="images/nosotros.gif" alt="nosotros" />
				<p>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</p>
				
		  </div>

			<div class="column" align="justify">
				<h3>OBJETIVOS</h3>
				<img src="images/vision.gif" alt="vision" />
				<p>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</p>
				
			</div>	
			
			<div class="column last" align="justify">
				<h3>CONTACTOS</h3>
				<img src="images/mision.gif" alt="mision" />
				<p>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</p>
				
			</div>	
        
			<div class="clear"></div>
		</div>

ArielGomeX · #2 (**permalink**) 24/03/2011, 12:27

Ese codigo tiene MUCHOS errores, te recomiendo que utilises UL no tantos DIVs para hacer algo tan simple.

Este es un ejemplo que me tomo 10 minutos.

Código:

#ContentColumn {
	width: 920px;
	height: 860px;
	position: relative;
	margin: 0 auto;
	background: #ccc;
	border: solid 5px #999;
	padding: 20px;
}
.Columna1 {
	display:block;
	position: absolute;
	left:20px;
	top:20px;
	list-style: none;
	width: 350px;
}
.Columna1 li {
	display:block;
	width: 350px;
	margin-bottom:20px;
}


.Columna2 {
	display:block;
	position: absolute;
	right: 20px;
	top:20px;
	list-style: none;
	width: 350px;
}
.Columna2 li {
	display:block;
	width: 350px;
	margin-bottom:20px;
}

Código HTML:

<div id="ContentColumn">

<ul class="Columna1">
<li>
<h3>VISION</h3>
<img src="images/vision.gif" alt="vision" />
<p>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</p>
</li>

<li>
<h3>VISION</h3>
<img src="images/vision.gif" alt="vision" />
<p>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</p></li>

<li>
<h3>VISION</h3>
<img src="images/vision.gif" alt="vision" />
<p>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</p>
</li>
</ul>


<ul class="Columna2">
<li><h3>VISION</h3>
<img src="images/vision.gif" alt="vision" />
<p>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</p></li>
<li><h3>VISION</h3>
<img src="images/vision.gif" alt="vision" />
<p>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</p></li>
<li><h3>VISION</h3>
<img src="images/vision.gif" alt="vision" />
<p>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</p></li>
</ul>

</div>