Search code examples
imagepositioningblock

Positioning Several Images Inside a Div Block

I want to position several images inside a div block. The position of the images inside it should be relative to that div.

Should I put each image inside a block of its own size and position those blocks relatively to the bigger block? (So in any browser the block will look the same!)

Solution

  • You can do it like this. Here's a simple mock up.

    the Html

    <div>
<img src="/1st.jpg">
<img src="/2nd.jpg">
<img src="/3rd.jpg">
</div>

    The css

    div { display: block; }

img { display: inline-block; position: relative; float: left; }