?
Solved

make two cells like a table useing div

Posted on 2007-07-25
17
Medium Priority
?
228 Views
Last Modified: 2012-05-05
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
0
Comment
Question by:Johnny
  • 9
  • 7
17 Comments
 
LVL 17

Expert Comment

by:jasonsbytes
ID: 19569808
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>';
0
 
LVL 17

Assisted Solution

by:jasonsbytes
jasonsbytes earned 400 total points
ID: 19569823
one minor adjustment to my last post...  Add the background: '.$color.';" to the internal 2 div's and not the external one... like:

echo '<div style="width:200px; 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>';
0
 
LVL 19

Accepted Solution

by:
v2Media earned 1600 total points
ID: 19569858
<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 id="tbl">
    <div class="cell">Manufacturer</div>
    <div class="cell">Type</div>
    <!-- start loop -->
    <div class="cell"><?php echo $row1; ?></div>
    <div class="cell"><?php echo $row1; ?></div>
    <!-- end loop -->
</div>
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:Johnny
ID: 19569859
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
0
 

Author Comment

by:Johnny
ID: 19569887
apparently its a firefox thing..grrr it render in ie fine
0
 
LVL 17

Expert Comment

by:jasonsbytes
ID: 19569889
Is the border style being applied to the div's that are inside the loop?
0
 
LVL 17

Expert Comment

by:jasonsbytes
ID: 19569896
that's odd, i dont' know of any diff between borders in IE and FF.
0
 
LVL 17

Expert Comment

by:jasonsbytes
ID: 19569956
can you do a view source in ff and past the results here?
0
 

Author Comment

by:Johnny
ID: 19570015
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>
0
 

Author Comment

by:Johnny
ID: 19570051
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
0
 
LVL 17

Expert Comment

by:jasonsbytes
ID: 19570057
You have an extra > here:
.$color.';>">'.$row1->Manufacturer
should be:
.$color.';">'.$row1->Manufacturer
0
 

Author Comment

by:Johnny
ID: 19570066
heres your render v2Media

http://dragon-software.info/ee/div-a.png
0
 

Author Comment

by:Johnny
ID: 19570094
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
0
 
LVL 17

Expert Comment

by:jasonsbytes
ID: 19570107
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.
0
 

Author Comment

by:Johnny
ID: 19570127
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)
0
 

Author Comment

by:Johnny
ID: 19570168
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
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question