Layout breaks when image is missing

Question

I have the 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 to leave Earth, and somebody forgot to turn the last robot off?</p>
            </article>
        </li>
        <li>
           //contains another <article> similar to the first one
        </li>
        <li>
           //contains another <article> similar to the first one
        </li>
    </ul>

I have to style this html code without changing it using css only so that the three articles appear next to each other. The <img> elements should be above the <time> elements and <time> elements should be above the <p> elements. Something like this: with image. If an image is missing though it looks like this: without image.

Here is the simplified version of the css I use to style it and where I think I go wrong:

    li {
        float: left;
        //some padding
    }

    time {
        position: relative;
        top: 8px;
    }

    p {
        position: relative;
        top: 16px;
    }

Can you help me fix it so that the time and the description always appear at the same place even when the image is missing?

Can you share a screenshot of the breakage? I am not clear exactly on how it is "broken" — docodemore, Nov 12 '14 at 15:18
[here you go](https://drive.google.com/file/d/0B5AXSi-pHepGYmJiekR3eEtpLWM/view?usp=sharing). When there is no image I want the text to appear where it appears when there is image. — mariya, Nov 12 '14 at 15:22

docodemore · Accepted Answer · 2014-11-12T20:15:52.623

Ensure the header area has height:

height:200px - or something similar:

header { height: 200px; }

img will need to have same height or it will look like it is staggering - the white space will then appear inplace of an image.

also, to prevent text from appearing above the time area, consider using this: (it may be a little overkill)

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

score 0 · Answer 2 · answered Nov 12 '14 at 15:22

0

Maybe you can try to position your elements absolute instead of relative? This will cause a independency of the position of all objects.

I like the design of you webpage, by the way.

answered Nov 12 '14 at 15:22

Jonathan Neeskens

551
1
4
12

score 0 · Answer 3 · answered Nov 12 '14 at 15:31

0

How are you ensuring that your image dimensions are the same? Perhaps using a div with preset dimensions such as width:200px; height:200px;. Then if there is nothing in that div, it is still styled in the same original location but would be blank.

You might consider:

<div></div>

div {
width:200px;
height:200px;
position:relative;
float:left;
}

This way you could use the div as a sort of placeholder and also as a spot that you could slap an image in whenever you wanted.

answered Nov 12 '14 at 15:31

gtmoripped

23
1
2
7

Thank you! I had width and height for the images but I thought it was irrelevant for the question and skipped it in the description. I added just `float: left` as you suggested and it fixed it! – mariya Nov 12 '14 at 15:43
float should be avoided if at all possible – docodemore Nov 12 '14 at 20:16

Layout breaks when image is missing

3 Answers3