Duda si he hecho una chapuza

chrishxc · #1 (**permalink**) 09/10/2011, 11:45

Hola a todos.

He maquetado un diseño y me ha salido bien, pero no sé si es una chapuza lo que he hecho y quería opiniones.
Os cuento:

Mi código es el siguiente:

Código:

<div style =”fondo”>
    <div style="blanco">
        <div class="columnas"></div>
        <div class="columnas"></div>
        <div class="columnas"></div>
    </div>
</div>

Tengo un div que es un fondo
Un div blanco que rompe el fondo para poder escribir información y centrado.
3 divs que son 3 columnas de texto, maquetado en plan revista.
El primer fondo no puede ser body pq la web en sí tiene otro color. Así que no hay otra manera que hacerlo con 3 divs.

El problema reside en que las 3 columnas necesitan un float:left, para poder ir una al lado de la otra. Por lo tanto el div blanco también necesita un float:left para ampliarse al contenido de las columnas, a su vez el fondo, para ampliarse con el blanco.
Ahora bien. Cómo hago para que el div blanco se centre con un margin:auto, cuando lo tengo con float:left?

Pues bien.. mi solución ha sido poner entre blanco y columnas:

Código:

<div style =”fondo”>
  <div style="width:980px; margin-left:auto; margin-right:auto"> 
    <div style="blanco">
        <div class="columnas"></div>
        <div class="columnas"></div>
        <div class="columnas"></div>
  </div>
    </div>
</div>

Lógicamente ha funcionado... pero lo consideráis una chapuza?? :S

emprear · #2 (**permalink**) 09/10/2011, 14:13

Bueno, muy claro no me queda

con esto, tendrias tres columnas centradas

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.columnas {
float: left;
width: 33.33%;
height: 50px;
}
</style>
</head>
<body>
 
  <div style="width:980px; margin: 0 auto;"> 
        <div class="columnas">texto col 1<br />zzzzzz</div>
        <div class="columnas">texto col 2<br />ssssss</div>
        <div class="columnas">texto col 3<br />ggggg</div>
  </div>
</body>
</html>

Y esto

Código HTML:

Ver original<div style =”fondo”>
    <div style="blanco">

habrás querido poner class="fondo" y class="blanco" ?
Buenó sería ver todo completo, html y css

Saludos