On the next row, image on the right, text on the left
The image fills out each row, so I am trying to set the text div to be 100% height, and then place the inner div for the text to be right in the centre.
I can get it to be centered, but the container won't go full height.
What am I doing wrong?
Code: Select all
<style>
.home-right h3
{
margin: 0px;
padding: 0px;
text-transform: uppercase;
font-family: 'Titillium Web', sans-serif;
font-weight: 300;
text-align: left;
color: #A37E2B;
font-size: 25px;
position: relative;
}
.home-right-text
{
width: 45%;
float: right;
position: relative;
min-height: 100%;
height: 100%;
border: 1px solid #ffff00;
}
.home-right-text-inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* unnecessary styling properties */
max-width: 50%;
text-align: center;
border: 1px solid blue;
}
.home-right-image
{
text-align: right;
float: left;
width: 50%;
margin-right: 20px;
}
.home-right-image img
{
max-width: 100%;
}
</style>
echo "<div class='home-right'>";
$result = mysql_query ("SELECT * FROM static WHERE section = 'home-yacht'");
while ($row = mysql_fetch_object($result))
{
echo "<div class='home-right-text'>
<div class='home-right-text-inner'>
$row->content
</div>
</div>
<div class='home-right-image'><img src='/images/pages/$row->photo' /></div>
";
}
echo "<div style='clear: both' ></div>
</div>";