Link to home
Start Free TrialLog in
Avatar of Johnny
JohnnyFlag for United States of America

asked on

make two cells like a table useing div

i have the line
   echo '<div style="width:200px; border:1px solid black; background: '.$color.';">&nbsp;&nbsp;'.$row1->Manufacturer . '&nbsp;&nbsp;&nbsp;' . $row1->Type . '</div>';

this works great but i want it to separate the info i have &nbsp;&nbsp; separating it now. This does not lineup the data in the div very well.
I tried to make a second div but it printed on the next row i want it all on the same line if i was to do this with a table it be </TD><TD>

how do i separate the data so it can line up, i do not want to use tables as it messes up my tab panels allot. so im using div's to display the info.

thank you in advance for any code and  help you may provide
Avatar of Jason Minton
Jason Minton
Flag of United States of America image

echo '<div style="width:200px; border:1px solid black; background: '.$color.';"><div style="float:left; width: 50%;">'.$row1->Manufacturer . '</div><div style="float:right; width: 50%;">' . $row1->Type . '</div></div>';
SOLUTION
Avatar of Jason Minton
Jason Minton
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Johnny

ASKER

one problem the border

border:1px solid black;

its right in all other respects it just does not continue with the border past the first one
Avatar of Johnny

ASKER

apparently its a firefox thing..grrr it render in ie fine
Is the border style being applied to the div's that are inside the loop?
that's odd, i dont' know of any diff between borders in IE and FF.
can you do a view source in ff and past the results here?
Avatar of Johnny

ASKER

v2Media,
NO JOY as well it prints it with offset lines (had to mod a bit to get my background alternating colors too)

<?
include(".\include\mysql_connection.php");
include(".\script_config.php");
$query1 = "SELECT `Manufacturer`, `Type` FROM `products` WHERE `Sub_Category`='Featured';";
$result1 = mysql_query($query1) or die(mysql_error()); // replace die() with your error handler

$featureCount = mysql_num_rows($result1);
?>

<style type="text/css">
#tbl {
    width: 404px;
    padding: 0;
    margin: 0;
}
.cell {
      width: 190px;
      float: left;
      border: 1px solid black;
      padding-right: 5px;
      padding-left: 5px;
}
</style>


</div>
<div id="tbl">
    <div class="cell">Manufacturer</div>
    <div class="cell">Type</div>
    <!-- start loop -->
    <?
while ($row1 = mysql_fetch_object($result1))
{
    if($color == $even_row_color) {
     $color = $odd_row_color;
    } else {
      $color = $even_row_color;
    }
   //echo $row1['Manufacturer'] . "&nbsp;" . $row1['Type'] . "<br />";
echo '<div class="cell" style="background: '.$color.';>">'.$row1->Manufacturer . '</div><div style="background: '.$color.';">' . $row1->Type . '</div>';
}
?>    <!-- end loop -->
</div>
Avatar of Johnny

ASKER

jasonsbytes
-------------------- ie snip --- for comparison---
<div style="width:220px; border:1px solid black;"><div style=" float:left; width: 50%;background: lightsteelblue;">Roketa</div><div style="float:right; width: 50%;background: lightsteelblue;">ATV-01</div></div><div style="width:220px; border:1px solid black;"><div style=" float:left; width: 50%;background: lavender;">Roketa</div><div style="float:right; width: 50%;background: lavender;">ATV-67</div></div><div style="width:220px; border:1px solid black;"><div style=" float:left; width: 50%;background: lightsteelblue;">Roketa</div><div style="float:right; width: 50%;background: lightsteelblue;">ATV-21</div></div><div style="width:220px; border:1px solid black;"><div style=" float:left; width: 50%;background: lavender;">Roketa</div><div style="float:right; width: 50%;background: lavender;">DB-27</div></div><div style="width:220px; border:1px solid black;"><div style=" float:left; width: 50%;background: lightsteelblue;">Roketa</div><div style="float:right; width: 50%;background: lightsteelblue;">ATV-02</div></div><div style="width:220px; border:1px solid black;"><div style=" float:left; width: 50%;background: lavender;">Roketa</div><div style="float:right; width: 50%;background: lavender;">UV-02K</div></div><div style="width:220px; border:1px solid black;"><div style=" float:left; width: 50%;background: lightsteelblue;">Roketa</div><div style="float:right; width: 50%;background: lightsteelblue;">ATV-03AD-AL</div></div><div style="width:220px; border:1px solid black;"><div style=" float:left; width: 50%;background: lavender;">Tank</div><div style="float:right; width: 50%;background: lavender;">ATV150FA</div></div>  
</div>

------------------- ff snip --------------
<div style="border: 1px solid black; width: 220px;"><div style="background: lightsteelblue none repeat scroll 0%; float: left; width: 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Roketa</div><div style="background: lightsteelblue none repeat scroll 0%; float: right; width: 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">ATV-01</div></div><div style="border: 1px solid black; width: 220px;"><div style="background: lavender none repeat scroll 0%; float: left; width: 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Roketa</div><div style="background: lavender none repeat scroll 0%; float: right; width: 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">ATV-67</div></div><div style="border: 1px solid black; width: 220px;"><div style="background: lightsteelblue none repeat scroll 0%; float: left; width: 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Roketa</div><div style="background: lightsteelblue none repeat scroll 0%; float: right; width: 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">ATV-21</div></div><div style="border: 1px solid black; width: 220px;"><div style="background: lavender none repeat scroll 0%; float: left; width: 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Roketa</div><div style="background: lavender none repeat scroll 0%; float: right; width: 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">DB-27</div></div><div style="border: 1px solid black; width: 220px;"><div style="background: lightsteelblue none repeat scroll 0%; float: left; width: 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Roketa</div><div style="background: lightsteelblue none repeat scroll 0%; float: right; width: 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">ATV-02</div></div><div style="border: 1px solid black; width: 220px;"><div style="background: lavender none repeat scroll 0%; float: left; width: 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Roketa</div><div style="background: lavender none repeat scroll 0%; float: right; width: 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">UV-02K</div></div><div style="border: 1px solid black; width: 220px;"><div style="background: lightsteelblue none repeat scroll 0%; float: left; width: 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Roketa</div><div style="background: lightsteelblue none repeat scroll 0%; float: right; width: 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">ATV-03AD-AL</div></div><div style="border: 1px solid black; width: 220px;"><div style="background: lavender none repeat scroll 0%; float: left; width: 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Tank</div><div style="background: lavender none repeat scroll 0%; float: right; width: 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">ATV150FA</div></div>  

------------------
sorry for the all stringed together
You have an extra > here:
.$color.';>">'.$row1->Manufacturer
should be:
.$color.';">'.$row1->Manufacturer
Avatar of Johnny

ASKER

heres your render v2Media

http://dragon-software.info/ee/div-a.png
Avatar of Johnny

ASKER

echo '<div style="width:220px; border:1px solid black;"><div style=" float:left; width: 50%;background: '.$color.';">'.$row1->Manufacturer . '</div><div style="float:right; width: 50%;background: '.$color.';">' . $row1->Type . '</div></div>';

jasonsbytes,

i don't see where the > would be
I was looking at the code you posted a few posts up:
while ($row1 = mysql_fetch_object($result1))
{
    if($color == $even_row_color) {
     $color = $odd_row_color;
    } else {
      $color = $even_row_color;
    }
   //echo $row1['Manufacturer'] . "&nbsp;" . $row1['Type'] . "<br />";
echo '<div class="cell" style="background: '.$color.';>">'.$row1->Manufacturer . '</div><div style="background: '.$color.';">' . $row1->Type . '</div>';
}
?>    <!-- end loop -->
</div>

Maybe just a typo.
Avatar of Johnny

ASKER

yeah that was for v2Media . i took out the > and no change on his rendering...

we are working with two different codes here (i made a page for v2Media alone)

still not working for ff/ie problem too (i like the way it worked just want the borders to work right)
Avatar of Johnny

ASKER

echo '<div class="cell" style="background: '.$color.';">'.$row1->Manufacturer . '</div><div class="cell" style="background: '.$color.';">' . $row1->Type . '</div>';


i forgot the class in the second cell info

i got v2Media example to work

im going to give v2Media the answer and more points and jasonsbytes assisted with 100 points

thanks for the help