keep position on different resolution - html

Question

Hi i got this image gallery and information that should be seen on the right side of the pictures. i floated them both as left. my default resolution is 1366 x 768. it turned out ok. but if i change it to 1024 x 768, the information keeps going down, i need to keep the information on the right side of the image even though other users have different resolutions. here is the code, can some help me?
HTML
<div id="home_page_images">
<div id="home_page_images_slider">
<img src="images/accred_images/image_1.JPG" alt="In the office with the evaluators" />
<img src="images/accred_images/image_2.JPG" alt="Evaluating faculties" />
<img src="images/accred_images/image_3.JPG" alt="CCS students OJT" />
<img src="images/accred_images/image_4.JPG" alt="Packaging of hard documents" />
<img src="images/accred_images/image_5.JPG" alt="Meeting of the evaluators" />
</div>
</div>
<div id="home_page_content_frame">
<div id="home_page_content">
<span>Welcome to the QCE and CCE Evaluation System</span>
<p>The CCE Evaluation process, also known as "Accreditation", is a voluntary, non-governmental process that includes an external review of a professor’s ability to provide quality programs. It is helpful in many aspects, from ensuring that students are learning relevant material to allowing a school access to funding. Accreditation reviews include self-evaluations, peer-reviews, committee-reviews, and the development of in-depth strategic plans. They also include reviews of a school’s mission, faculty qualifications, and curricula.</p>
</div>
</div>
CSS
#home_page_images {
position: relative;
width: auto;
margin-top: 40px;
margin-left: 40px;
float: left;
}
#home_page_content_frame {
float: left;
width: auto;
}
#home_page_content p {
text-align: justify;
position:relative;
}

Answer 1

On your divs, you could use percentages instead of pixels like robobobobo said, but then if you are making it for mobile devices, you would probably want to use media queries as mobile devices are small, and if you decide to use something like 50% for desktop devices, it would be really small, example of media queries:
#div {
width:375px;
}
#media screen and (min-width: 1366px) {
#div {width:375px;}
}
#media screen and (min-width: 1440px) {
#div {width:428px;}
}
#media screen and (min-width: 1600px) {
#div {width:434px;}
}
#media screen and (min-width: 1920px) {
#div {width:540px;}
}
Change the (min-width: 1920px) part to the minimum or maximum size you want the code to be fore.