Display data from mysql in two columns

Question

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.

It would help if you show us the output you expect. Try [this](http://stackoverflow.com/questions/5645986/two-column-layout-using-divs) — Hameed, Mar 26 '14 at 23:14

score 1 · Answer 1 · answered Mar 26 '14 at 23:12

1

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};

answered Mar 26 '14 at 23:12

Crizly

971
1
12
33

.product .product-content{ float:left; } – user3195317 Mar 26 '14 at 23:28
Can you paste ur CSS (i've had tonnes of issues like this where the divs just won't float properly :P)? – Crizly Mar 26 '14 at 23:41
go on www.urimsopa.com and inspect element – user3195317 Mar 26 '14 at 23:41

score 0 · Answer 2 · answered Mar 26 '14 at 23:25

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.

score 0 · Accepted Answer · answered Mar 27 '14 at 07:14

0

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

answered Mar 27 '14 at 07:14

Febin Thomas

58
1
2
9

Thank you. late reply. how do i get the gap between them to increase? http://urimsopa.com/index.php?p=Default_index – user3195317 Apr 29 '14 at 20:44

Display data from mysql in two columns

3 Answers3