CODEWITHSUNDEEP
phphtmlmysqlcss
user3195317
user3195317

Reputation: 5

Display data from mysql in two columns

I am calling from mysql from one table, this is displayed in one column, i would like the data to be next to each other in two columns. you can view this at www.urimsopa.com

This is my code. 

$results = $mysqli->query("SELECT * FROM main_menu ORDER BY MenuID ASC");
    if ($results) { 

        //fetch results set as object and output HTML
        while($obj = $results->fetch_object())
        {
            echo '<div class="product">'; 
            echo '<form method="post" action="model/cart_update.php">';
            echo '<div class="product-content"><h2>'.$obj->Title.'</h2>';
            echo '<div class="product-thumb"><img width=400 height=300 src="uploads/'.$obj->Photo.'"></div>';
             echo '<div class="product-info">';
            echo 'Price '.$currency.$obj->Price.' | ';
            echo 'Qty <input type="text" name="product_qty" value="1" size="5" />';
            echo '<button class="add_to_cart">Add To Cart</button>';
            echo '</div>
           </div>';
         echo '<input type="hidden" name="product_code" value="'.$obj->MenuID.'" />';
            echo '<input type="hidden" name="type" value="add" />';
            echo '<input type="hidden" name="return_url" value="'.$current_url.'" />';
            echo '</form>';
            echo '</div>';

thank you.

Upvotes: 0

Views: 220

Answers (3)

Febin Thomas
Febin Thomas

Reputation: 58

Its CSS issue change your styles.css

line 781 

#products-wrapper {
float: left;
font: 12px Arial,Helvetica,sans-serif;
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
position: relative;
width: 100%;
}

line 791

.products {
float: left;
margin-right: 10px;
width: 100%;
}

and also remove all <br/> tag from your code

Upvotes: 0

effone
effone

Reputation: 2192

You have to reconstruct many aspects.

Your product wrapper having 640px width. and your single product box width is 434px. So consider reducing that box width along with the image width or increase wrapper width more than 870px to provide enough space to stay 2 boxes side by side.

Your .products class having float:left; which is unnecessary.Float your product class to left.

.product {
    float: left;
    display: inline-block;
}

Remember to clear:both; after your .products block.

Upvotes: 0

Crizly
Crizly

Reputation: 1009

I think your problem is CSS not mysql, if each time you pull down that while loop you're creating a new object, you need to float each object to the left then they should fit into place.

so try

.product {float:left};

Upvotes: 1

Related Questions