Organizar div correctamente

[ositopicaron]

Iniciado por aguila_393

Aca les dejo una imagen de como deberia quedar :



Se hacerlo con tablas, pero no logro que funcione con las divs.

Hola hermano yo tuve una situación similar y me arme una estructura en CSS, el contenido (tanto la imagen como el texto), me lo traigo de una base de datos y queda de 10 !!!

A ver si te puedo ayudar con esto:

el HTML es el siguiente:
---------------------------------------------------------------------------------------

<div class="left-article"><a href="#"> <img class="blog-img" src="images/flyers/<?php echo $obj_evento->getFotomin();?>" alt="blogimg1" /></a>

<div class="title">
<div class="fecha"><?php echo $obj_evento->getFechaevento();?></div>
<div class="barrita">|</div>
<div class="titulo"><a href="#"><?php echo $obj_evento->getTitulo(); ?></a></div>
</div>

<div class="subtitulo"><?php echo $obj_evento->getSubtitulo();?></div>
<div class="desc"><?php echo $obj_evento->getIntro();?></div>

<div class="infobubble">
<div class="textofooter"><?php echo $obj_evento->getTextofooter();?></div>
<div class="leerMas"><a href="./evento" target="_blank">leer más</a></div> <div class="inscribirme"><a href="#">inscribirme</a></div>
</div>


</div> <!-- left-article -->

---------------------------------------------------------------------------------------
Fijate que en donde están las etiquetas PHP tenés que reemplazarlas por el texto el vos le querés colocar
----------------------------------------------------------------------------------------

El CSS es el siguiente:
---------------------------------------------------------------------------------------
#wrapper .left-article {
float: left;
width: 740px;
height:230px;
padding : 0px 0 10px 0;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ccc;
}
.left-article .title {
float: right;
width: 480px;
height: 25px;

}

.left-article .blog-img {
width:240px;
height:210px;
}

.left-article .title .fecha {
width:110px;
height:25px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color:#8CD50B;
overflow:hidden;
padding-top:2px;
float:left;
}

.left-article .title .titulo {
width:350px;
height:25px;
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color:#414141;
overflow:hidden;

}

#content .left-article .title .titulo a {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color:#414141;
text-decoration:none;
overflow:hidden;
margin-top:5px;

}

#content .left-article .title .titulo a:hover {
color: #8CD50B;
font-family: Arial, Helvetica, sans-serif;
overflow:hidden;
}

.left-article .title .barrita {
float:left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color:#8CD50B;
width:1px;
height:25px;
margin-right:15px;
}

#content {
float: left;
width:940px;
}
#content .left-article .subtitulo {
width:480px;
height:27px;
display:block;
margin-bottom:3px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #414141;
font-size: 20px;
overflow:hidden;
}


#content .left-article .infobubble {
background-image: url(../images/infobubble.png);
height: 25px;
width: 480px;
background-repeat: no-repeat;
margin-top:3px;
float: right;

}
#content .left-article .infobubble .textofooter{
width: 305px;
height:15px;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
padding-left:5px;
padding-top:5px;
float: left;
overflow:hidden;
}

.left-article .desc {
float: right;
width: 480px;
height:122px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align:justify;
color: #414141;
margin-bottom:0px;
margin-top:5px;
overflow:hidden;
}

#content .left-article .contenido a {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration:none;
font-size: 12px;
color: #414141;
margin-top: 12px;
}

#content .left-article .contenido a:hover {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
color: #fff;
margin-top: 12px;
text-decoration: underline;
}

.left-article .leerMas {
width:65px;
height:20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
margin-top:5px;
margin-left:12px;
float: left;
color:#414141;
text-decoration:none;
}

.left-article .leerMas a{
color:#414141;
text-decoration:none;
}

.left-article .leerMas a:hover {
text-decoration:underline;
}

.left-article .inscribirme {
width:75px;
height:20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
margin-top:5px;
margin-left:10px;
float: left;
color:#414141;
text-decoration:none;
}

.left-article .inscribirme a {
color:#414141;
text-decoration:none;
}

.left-article .inscribirme a:hover {
text-decoration:underline;
}
---------------------------------------------------------------------------------------

Solo tenes que buscarte unas imágenes para reemplazar las mías (los botones, el infobubble, etc).

Fijate que hay más elementos que en tu estructura, ya que tenes una imagen a la izquierda, después tenés una fecha (arriba a la izquierda), inmediatamente hay una línea vertical de separación y luego viene un título corto (a la derecha de la fecha). Abajo vas a encontrar el subtítulo, y por debajo de este, el contenido. Por debajo del contenido vas a encontrar una barra que se llama infobubble con un pequeño texto y dos botones (inscribirme y leer mas).

Acá te adjunto la imagen de como se vería:



Espero que te sirva. Mi e-mail es: [email protected]