Hight Changing Depending on Screen Size

Question

I'm having a strange issue here..

Here's my CSS:

#rightimage img {
 max-width: 10%;
}

#mainbox {
 background: #fff;
 box-shadow: 0px 3px 12px 2px #000;
 padding: 10px;
 width: 56%;
 margin-top: 20px;
}

#container {
 margin-left: 11%;
}

#rightimgage {
 background: #fff;
 box-shadow: 0px 3px 12px 2px #000;
 padding: 10px;
 position: absolute;
 right: 12%;
 min-width: 25px;
 max-width: 28%;
 margin-top: -0.5%;
}

#rightimgage2 {
 background: #fff;
 box-shadow: 0px 3px 12px 2px #000;
 padding: 10px;
 position: absolute;
 right: 83px;
 width: 285px;
}

#cssmenu li {
 display: inline-block;
}


.rotate {
 -webkit-transition: all 0.5s ease-out; 
 -moz-transition: all 0.5s ease; 
 -o-transition: all 0.5s ease;
}

.rotate:hover {
 -webkit-transform: rotate(-7deg); 
 -moz-transform: rotate(-7deg); 
 -o-transform: rotate(-7deg); 
}

This is my HTML:

<div id="rightimgage" style="top: 247px;" class="rotate">
<img src="http://#.x10.bz/image1.png" />
</div>

<div id="rightimgage" style="top: 650px;" class="rotate">
<img src="http://#.x10.bz/image2.png" />
</div>

<div id="rightimgage" style="top: 1053px;" class="rotate">
<img src="http://#.x10.bz/image3.png" />
</div>

<div id="rightimgage" style="top: 1456px;" class="rotate">
<img src="http://#.x10.bz/image4.png" />
</div>


<div id="mainbox">
<p>RANDOM TEXT HERE...</p>
</div>

On a 1024 x 768 screen resolution, it shows like this: http://prntscr.com/88c4tj As you can see, the two divs next to each other are the same hight.

However on a 1366 x 768 screen resolution, it looks like this: http://prntscr.com/88c6ab As you can see, the image is way higher up than in the 1024 x 768 resolution.

How do I resolve this, so the images are the same hight in all resolutions?

Will it be tough to create quick fiddle? – radiant Aug 24 '15 at 15:32 — radiant, Aug 24 '15 at 15:32

score 1 · Answer 1 · edited May 23 '17 at 11:44

1

Maybe it's the margin-top: -0.5%; in your #rightimgage. This value is -0.5% of the width. So it would change on a wider screen. See this question for further help: You should use top: -0.5%; instead. But then you have to care about style="top: 247px;" which overrides the value in the css file.

And a tipp for you:
You should use a class for rightimgage. Your solution is understood by most browsers but it's not officially valid ;-)

edited May 23 '17 at 11:44

Community

1
1

answered Aug 24 '15 at 15:37

Jibbow

757
1
8
17

Did it work? Or are you still searching for another solution? Feel free to ask :) – Jibbow Sep 02 '15 at 15:12

Hight Changing Depending on Screen Size

1 Answers1