Question

.image{
position:absolute;
display:inline-block;
}

Currently I have 2 images with the same size and I would like to equally let them share the screen. The img a on left handside and img b at right. The problem is if I set it as class, the two images is overlapped even I use inline – block. The restriction is I can not use relative. Therefore, is there any way to achieve this? Do I need to set a id for each image to do this? Thanks

Answer 1

Are you trying to make it that their width shares 50% of the viewport, and height is 100% of the viewport? That can be achieved this way:

HTML:

<img src="source.html" />
<img src="source.html" />

CSS:

html, body {
    width: 100%;
    height: 100%;
}

img {
    ​width: 50%;
    height: 100%;
    float: left;
}​

JS Fiddle Example