CODEWITHSUNDEEP
htmlcss
user926652
user926652

Reputation: 145

Issue with div positioning

And thanks in advance fro reading this. I am creating a page where the results of a query are shown inside a div. A typical div where on the left there is the image and on the right the description of the product and its characteristics. So my php script finds the number of results and through a for loop i am showing the results one under the other. I would like instead to show two results(divs) on each line. So if we call <#results#> the number of results, the html code of the template for now looks like this...

   <#FOR results#>
   <div id="description"></div>
   <#/FOR results#>

The css styles of the description div is ..

   #description {
   position:relative;
   // I noticed that display:table-cells; actually puts the divs one next the other but they occupy the whole screen
//Other properties related to font styling and etc }

If anyone has anyidea who that can be done either by the use of css or jquery or through php i would be grateful!!

Upvotes: 0

Views: 67

Answers (3)

Vivek Chandra
Vivek Chandra

Reputation: 4358

You can do this by setting the width:50% from the container.. here's a fiddle to get you started on how to get it done.. http://jsfiddle.net/e6rzg/

Set the width of the container to your specification and the result div -- set it as 50% ( of its parent).. as shown in the fiddle..

.container{
width:100%;
height:auto;
}
.result{
width:50%;
float:left;
height:40px;/* change as needed */
background-color:red;
}


<div class="container">
 <div class="result">1</div>
 <div class="result">2</div>
 <div class="result">3</div>
 <div class="result">4</div>
 <div class="result">5</div>
</div>

Upvotes: 1

Will
Will

Reputation: 3044

include "storescripts/connect_to_mysql.php"; //include mysql connect script 

//create dynamic variable 
$dynamicList = "";

//your SQL query 
$sql = mysql_query("SELECT * FROM products ORDER BY date_added DESC LIMIT 6");

// count the out put to make sure query has returned results 
$productCount = mysql_num_rows($sql); 

//if there are results loop over array and get results. then put them into divs. 
if ($productCount > 0) {
    while($row = mysql_fetch_array($sql)){ 
                     $id = $row["id"];
                     $product_name = $row["product_name"];
                     $price = $row["price"];
                     $dynamicList .= '<div class="row">
                                            <div>(Add image)</div>
                                            <div>(Add description variables)</div>
                                       </div>';
}
} else {
//error if no results have been returned. 
    $dynamicList = "We have no products listed in our store yet";
}


//then in your html 
<?php echo $dynamicList; ?>

use the css @Rich Bradshaw posted to format

Upvotes: 1

Rich Bradshaw
Rich Bradshaw

Reputation: 72975

For each row use a structure like this:

<div class="row">
    <div></div>
    <div></div>
</div>

Then some CSS like this:

.row {
    width:200px; // Or whatever
    padding:0;
    margin:0;
    overflow:hidden; // to contain float, though I'd use .clearfix here.
}
.row div {
    width:100px; // Or whatever
    padding:0;
    margin:0;
    float:left;
}

Upvotes: 2

Related Questions