Search code examples
csspositioning

Positioning at width 100%

I cannot work out why the div class pic-container won't align to the top of the page with the other 3.

Each of the child divs have a width of 25%.

I have a feeling I've missed something obvious..

Example here: http://tinkerbin.com/NS7vagaq

Solution

  • Set

    .pic-container{
    font-size:0;
    }

    to display: inline;

    So it is:

    .pic-container{
    font-size:0;
    display:inline;
    }

    Since you have changed the structure of your code so the above no longer works try this instead:

    <div class="pic_container">
    <img src="images/1.jpg">  
    <span class="viewer">  
        <img src="images/2.jpg">
        <img src="images/3.jpg">
    </span>
    <img src="images/4.jpg">
</div>

    No special CSS needed.