html - Layout breaks when image is missing -

i have following piece of html code:

    <ul>         <li>             <article>                 <header>                     <h2><a href='#'>wall-e review</a></h2>                     <img src='images/featured01.jpg' alt="wall-e">                 </header>             <time datetime="2011-10-10"> 10 octomber 2011 </time>             <p>what if mankind had leave earth, , forgot turn last robot off?</p>             </article>         </li>         <li>            //contains <article> similar first 1         </li>         <li>            //contains <article> similar first 1         </li>     </ul> 

i have style html code without changing using css 3 articles appear next each other. <img> elements should above <time> elements , <time> elements should above <p> elements. this: with image. if image missing though looks this: without image.

here simplified version of css use style , think go wrong:

    li {         float: left;         //some padding     }      time {         position: relative;         top: 8px;     }      p {         position: relative;         top: 16px;     } 

can me fix time , description appear @ same place when image missing?

ensure header area has height:

height:200px - or similar:

header { height: 200px; }

img need have same height or staggering - white space appear inplace of image.

also, prevent text appearing above time area, consider using this: (it may little overkill)

li {   /* avoid using float:left can adversely effect other dom elements */    display: inline-block;    vertical-align: top; } li header {    /* ensure header contains image , same size */   height: 200px;   overflow: hidden; } li header > img {  /* ensure image fits in header */   height: 200px; }