I have a huge blank space after applying a negative positioning (top: -150px)

[genzedu777]

Hi guys,

 

I have a question. After using...

 

#panel1 table {

position: relative;

left: 155px;

top: -150px;

}

 

I managed to align my 'table' with my 'picture', shown in modified (-155px).jpg attachment.

 

However the issue now is that, I am left with a blank space right below the 'table' and the 'picture', indicated by the red arrow. My question is, how do I clear the black space?

 

Looking at my 'original.jpg' attachment, it makes sense why there is a blank space. It is due to my 'force' positioning of the 'top: -155px;', which has caused the problem.

 

How do I framed the entire 'panel 1' nicely, so that I can get rid of the space and fit it nicely within panel 1.

'I want to achieve.jpg' attachment is what I would like to achieve

 

<?php
#panel1 table {
position: relative;
left: 155px;
top: -150px; 
}
#panel1 tr{
/*border: 1px solid black;*/
}
#panel1 td {
font: 14px Arial, Verdana, Tahoma, Helvetica, sans-serif;
color: #2B2B2B;
padding-bottom: 10px;
margin: 0;
}
#panel1 td.label {
font: bold 14px Arial, Verdana, Tahoma, Helvetica, sans-serif;
color: #5B5B5B;
}
.panel1_pic {
position: relative;
top: 10px;
}


//HTML & PHP code
if (mysqli_num_rows($data) == 1) {
    // The user row was found so display the user data
    $row = mysqli_fetch_array($data);
  
echo '<div id="panel1">';

//Picture
echo '<div class="panel1_pic">';
if (is_file(CT_UPLOADPATH . $row['picture']) && filesize(CT_UPLOADPATH . $row['picture']) > 0) {
      echo '<tr><td><img src="' . CT_UPLOADPATH . $row['picture'] . '" alt="' . $row['name'] . '" height="140" width="120" style="display: block; margin-left: 0; margin-right: 0; padding:8px; border:solid; border-color: #dddddd #aaaaaa #aaaaaa #dddddd; border-width: 1px 2px 2px 1px;" /></td>';
    }
else {
      echo '<tr><td><img src="' . CT_UPLOADPATH . 'nopic.jpg' . '" alt="' . $row['name'] . '" height="140" width="120" style="display: block; margin-left: 0; margin-right: 0; padding:8px; border:solid; border-color: #dddddd #aaaaaa #aaaaaa #dddddd; border-width: 1px 2px 2px 1px;"/></td>';
    }
echo '</div>'; //End of panel1_pic div

echo '<table>';
//Name
    if (!empty($row['name'])) {
      echo '<tr><td class="label">Name: </td><td>' . $row['name'] . '</td></tr>';
    }
//Nric
    if (!empty($row['nric'])) {
      echo '<tr><td class="label">NRIC: </td><td>' . $row['nric'] . '</td></tr>';
    }
//Gender
    if (!empty($row['gender'])) {
      echo '<tr><td class="label">Gender: </td><td>';
      if ($row['gender'] == 'M') {
        echo 'Male';
      }
      if ($row['gender'] == 'F') {
        echo 'Female';
      }
      echo '</td></tr>';
    }
//Race
if (!empty($row['race'])) {
      echo '<tr><td class="label">Race: </td><td>' . $row['race'] . '</td></tr>';
    }

//Religion
if (!empty($row['religion'])) {
      echo '<tr><td class="label">Religion: </td><td>' . $row['religion'] . '</td></tr>';
    }

//Teaching Credentials
if (!empty($row['teaching_credentials'])) {
      echo '<tr><td class="label">Teaching Credentials: </td><td>' . $row['teaching_credentials'] . '</td></tr>';
    }
//Tutoring Status
if (!empty($row['tutoring_status'])) {
      echo '<tr><td class="label">Tutoring Status: </td><td>' . $row['tutoring_status'] . '</td></tr>';
    }
//Occupation
if (!empty($row['occupation'])) {
      echo '<tr><td class="label">Occupation: </td><td>' . $row['occupation'] . '</td></tr>';
    }
//Address
if (!empty($row['address'])) {
      echo '<tr><td class="label">Address: </td><td>' . $row['address'] . '</td></tr>';
    }
//Postal Code
if (!empty($row['postal_code'])) {
      echo '<tr><td class="label">Postal Code: </td><td>' . $row['postal_code'] . '</td></tr>';
    }
//Home Number
if (!empty($row['hse_phone'])) {
      echo '<tr><td class="label">Home Number: </td><td>' . $row['hse_phone'] . '</td></tr>';
    }
//Handphone Number
if (!empty($row['hp'])) {
      echo '<tr><td class="label">Hp Number: </td><td>' . $row['hp'] . '</td></tr>';
    }

	echo '</table>'; //End of Panel 1's table

echo '</div>'; //End of Panel 1

  } //End of IF for $query and $data (Personal Profile)
  else {
    echo '<p class="error">There was a problem accessing your profile.</p>';
  }	


?>

 

[attachment deleted by admin]

[haku]

Float your columns left rather than using the negative margins. If you don't know how to use floats, google 'floatutorial'.

[genzedu777]

Hi Haku,

 

Thanks! It works!