Alineación de imágenes después del reseteo de CSS

[laylu]

Buenos días,

Llevo unas hores intentando alinear una imagen con un texto pero no doy con la forma de hacerlo. Intuyo que el problema está en la hoja de reseteo de CSS que "me se" lo carga todo y no sé qué debo redefinir para que los elementos tengan un comportamiento normal. Os pongo aquí el reseteo y después el código de lo que quiero.

Reseteo:

Código:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-weight: normal;
     font-style: normal;
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline;
}

body {
     line-height: 1
}

:focus {
     outline: 0
}

ol, ul {
     list-style: none
}

table {
     border-collapse: collapse;
     border-spacing: 0
}

blockquote:before, blockquote:after, q:before, q:after {
     content: ""
}

blockquote, q {
     quotes: "" ""
}

input, textarea {
     margin: 0;
     padding: 0
}

hr {
     margin: 0;
     padding: 0;
     border: 0;
     color: #000;
     background-color: #000;
     height: 1px
}

Aquí os pongo el código de lo que estoy escribiendo:

XHTML:

Código:

<h1>Revista</h1>

<div id="revista">
	
    <p>
        <img src="./content/revista/20090621.jpg" alt="20090621" align="top"/>
        <strong>Fecha: </strong>21 de junio del 2009 <br />
        <ul>
            <li>Descripción 1</li>
            <li>Descripción 2</li>
            <li>Descripción 3</li>
            <li>Descripción 4</li>
        </ul>
    </p>
     
</div>

Y aquí el CSS que he definido para todo lo que aparece en éste div "Revista":

CSS:

Código:

#revista {
	float: left;
	margin-top: 10px;
	padding-bottom: 10px;
	border-bottom: solid 2px #9acc00;
	display: block;
	margin-bottom: 10px;
}

#revista img{
	/*float: left;*/
	margin-right: 10px;
	width: 225px;
	margin-left: 110px;
	vertical-align: top;
}

Pretendo que la imagen quede a la izquierda (que lo hace) y el texto a la derecha (que lo hace parcialmente). En la parte que pone "fecha", ésta aparece alineada con la cabeza de la imagen, pero cuando escribo el ul, éste salta directamente y aparece debajo de la imagen, cuando yo quiero que aparezca a continuación del texto.

Cabe decir que si uso <p> para dejar la imagen fuera y que tenga que ver sólo con el texto, "fecha" queda debajo de la imagen directamente (y eso que no hay ningún "display: block;" para la imagen ...

SI alguien puede explicarme por qué el "ul" salta y cómo puedo subirlo, se lo agradeceré.

Atentamente, laylu.