Question

I am using thw folowing code:

<div data-role="homepage">
    <div data-role="content">   
        <div id="selectCircle">
        <img src="res/images/zive.png" alt="Zive.sk" id="ziveCircle"><br>
        <img src="res/images/auto.png" alt="AutoMoto.sk" id="autoCircle">
        <img src="res/images/mobil.png" alt="MobilMania.sk" id="mobilCircle">
        </div>
        <!-- <a href = "feeds.html" rel="external" data-role="button">index</a> -->
    </div>
</div>

and the folowing CSS:

#selectCircle{
    position:fixed;
    top: 10%;
    width: 100%;
    text-align: center;
}
#mobilCircle{
    position:absolute;
    right: 50%;
}
#autoCircle{
    position:absolute;
    left: 50%;
}

everything looks great when the images can have their full size. But I want them to resize with screen size change. So when I diminish browser windows or load the code on mobile (which will not let the images to display in full size) the images will resize to fit div and keep their position inside div.

PS: I have tried to display div border and it look like it has height of first image, but I want it to include also bottom two images.

EDIT: Here are links to images: image1, image2, image3 and here is how I want it to looks like image.

Answer 1

using position: fixed and position: absolute is going to make it a pain to develop responsively. You should try and get comfortable with relative positioning and floating elements.

Here’s an example that I think accomplishes what you’re after.