Layout issue i think...

[thefollower]

I have 2 tables that i want to be adjacent to each other but the second one is "under" the first one rather than be right next to it... how can it be corrected?

 

This is my html.. (has abit of php mixed with it)

 

<div id="bv_" style="position:absolute;left:150px;top:500px;width:250px;height:224px;z-index:0" align="center">

	<table width="300" border="1" cellpadding="0" cellspacing="0">
		<tr>
			<td width="100"><font style="font-size:14px" color="#FFFFFF" face="Arial"><center><b><u>User:</center></b></u></font></td>
			<td width="100"><font style="font-size:14px" color="#FFFFFF" face="Arial"><center><b><u>IP's:</center></b></u></font></td>
	</tr>

<?php
while($row = mysql_fetch_assoc($GetIP)){
	$IP = $row['IP'];
	?>
		<tr>
	<td width="100"><center><font style="font-size:14px" color="#FFFFFF" face="Arial"><?=$UserName?></center></font></td>
	<td width="100"><center><font style="font-size:14px" color="#FFFFFF" face="Arial"><?=$IP?></center></font></td>

</tr>
</td>

<?php
}
?>
</div>
<?php
$GetUserName2 = mysql_query("SELECT Username FROM userregistration WHERE UserID ='$Person'")
	or die(mysql_error());
	$GetUserNameRow2 = mysql_fetch_assoc($GetUserName2);
	$UserName = $GetUserNameRow2['Username'];
$GetPersonIP = mysql_query("SELECT * FROM iplogs WHERE UserID='$Person'")
or die(mysql_error());
If(mysql_num_rows($GetPersonIP) < 1){
Echo'<div id="bv_" style="position:absolute;left:350px;top:500px;width:180px;height:29px;z-index:10" align="center">
<font style="font-size:24px" color="#FFFFFF" face="Arial"><b><u>This person has no ips in their log.</u></b></font></div>';
}Else{
?>
<div id="bv_" style="position:absolute;left:350px;top:500px;width:250px;height:224px;z-index:0" align="center">

	<table width="300" border="1" cellpadding="0" cellspacing="0">
		<tr>
			<td width="100"><font style="font-size:14px" color="#FFFFFF" face="Arial"><center><b><u>User:</center></b></u></font></td>
			<td width="100"><font style="font-size:14px" color="#FFFFFF" face="Arial"><center><b><u>IP's:</center></b></u></font></td>
	</tr>

<?php
while($row = mysql_fetch_assoc($GetPersonIP)){
	$IP = $row['IP'];
	?>
		<tr>
	<td width="100"><center><font style="font-size:14px" color="#FFFFFF" face="Arial"><?=$UserName?></center></font></td>
	<td width="100"><center><font style="font-size:14px" color="#FFFFFF" face="Arial"><?=$IP?></center></font></td>

</tr>
</td>

<?php
}
?>
</div>

[dbrimlow]

Two reasons why:

 

1. you use the same id twice on a page. IDs can only be used once per page.

 

2. style="position:absolute;"

 

absolute positioning is not a precise layout tool without other containers to keep them under control.

 

You are better served using floats to have the two elements sit side by side.

 

Try this:

 

Change your id "bv_"  to a class, lose the positioning elements and float it left as follows

<div class="bv_" style="float:left;margin:500px 0 0 350px; padding:0; width:250px; height:224px; text-align:center">

 

Also, you are using old, deprecated html code (fonts, center, b, u, align="center", border="1" cellpadding="0" cellspacing="0")

 

So I would assume you are either not using a doctype or are using a "transitional" doctype. Both are not precisely cross-browser compatible. And unless you use standards compatible code, your layout will be in quirks mode. Once it is in quirks mode it is difficult to use precise layout style elements - particularly for cross-browser layouts. In quirks mode it will come closest to what you are trying to do in IE because modern browsers like FF, Mozilla, Safari and Opera all handle quirks mode differently.

 

For tables, I recommend using inline styles as well.

 

<table style="width:300px; border:1px solid #666666; padding:0;">

<td style="width:100px; font-family:Arial, Verdanas, Sans-serif; font-size:14px; font-weight:bold; font-style:italics">User:</td>

 

Now. This is a good way to illustrate why using a style sheet either in the head tag or link to an external css is so much easier.

 

Why retype the table styles and td styles inline for each one when you can just set it once in the css?

 

At least standardize your pages main font-family, size and color so you don't have to repeat them for every "in-line" style you make.

 

In your head tag add:

 

<style type="text/css">

<!--

body {

font-family:Arial, Verdanas, Sans-serif;

font-size:12px;

background-color:#FFFFFF;

color:#000000"

}

 

.bv {

float:left;

margin:500px 0 0 350px;

padding:0;

width:250px;

height:224px;

text-align:center

}

 

table {

background-color:#000000;

color:#FFFFFF;

border:1px solid #666666;

padding:0;

}

td {

padding:0;

margin:5px;

font-size:14px;

font-weight:bold;

font-style:italics;

text-decoration:underline

}

 

Now, in the markup, you don't need to use the <div> tags for the class. Just designating the bv class uses all of the style elements in the table - and for any style changes like width, height, font, colors, the inline style will be less wordy because the positing elements are already in the class.

 

So all of this:

<table style="width:300px; border:1px solid #666666; padding:0;">
<td style="width:100px; font-family:Arial, Verdanas, Sans-serif; font-size:14px; font-weight:bold; font-style:italics">User:</td>

 

simply becomes this:

 

<table class="bv" style="width:300px">
<td>User:</td>

 

I used to have php pages over 5000 lines long. Once I was able to stop using markup level style tags - like hundreds of font tags all over the place, the same page became 1000 lines - which made debugging the php MUCH easier.