Div is not rigged onto image and text is not centered properly? - php

Question

I have a main Div which is the "master" of all divs. This div's width is 70% of the page. Inside this div, is another div that contains an image. This div is called mainImg. It is set to absolute positioning and all the rest of the elements are set to absolute as well. All these elements move absolutely relative to the main div.
Here's my code:
PHP/HTML
<?php
$resultSet = $db->query("SELECT * FROM Articles");
if ($resultSet->num_rows != 0)
{
while ($rows = $resultSet->fetch_assoc())
{
$id = $rows["id"];
if ($id <= 3)
{
$images = $rows["image"];
$title = $rows["title"];
echo "<div id=main>";
if ($id == 1)
{
echo "<div id=mainImg>";
echo "<img src=$images>";
echo "<div id=mainTitle>";
echo "<h2>$title</h2>";
echo "</div>";
echo "</div>";
}
echo "</div>";
}
}
}?>
CSS
body{
position: relative;
}
#main{
position: relative;
width: 70%;
height: auto;
margin: 1.5% auto;
}
#mainImg{
position: absolute;
width: 65%;
}
#mainImg img{
width: 100%;
}
#mainTitle{
position: absolute;
width: 100%;
height: 25%;
bottom: 0%;
background-color: rgba(100, 0, 0, 0.7);
}
#mainTitle h2{
color: white;
text-align: center;
font-family: sans-serif;
font-size: 120%;
}
My problem that I am facing is that the div inside of mainImg (mainTitle), is not properly rigged inside the image. The div is a semi-transparent block that should fit perfectly on the bottom of the image with 25% height. Instead, the block is coming out of the image a bit. The other problem that I am facing is my text inside this mainTitle div. The text is centered, but not aligned in the middle of the div. I am trying to make the text responsive, with percentages, but whenever I resize the text always goes below the div. How do I fix these three problems? (Rigging the div properly, aligning the text, and keeping the text inside the div at all times for other window sizes?
The semi-transparent div is coming off the edge of the image
When browser is resized, this is what happens to the text

Answer 1

<?php
$res = $db->query("SELECT * FROM Articles");
if( $res->num_rows > 0 ) {
echo "<div id='main'>";/* Open main div outside the loop */
while( $rows = $res->fetch_object() ) {
$id = $rows->id;
if ( $id <= 3 ) {
$image = $rows->image;
$title = $rows->title;
if ( $id == 1 ) {
echo "
<div id='mainImg'>
<img src='$image'>
<div id='mainTitle'>
<h2>$title</h2>
</div>
</div>";
}
}
}
echo '</div>';/* close main div */
}
?>