products are not floating from right to left

Alfraganus · August 14, 2015

I was creating small online shop, but my products are staing in center, and not itimizing from the left to right, I dotn know whats wrong with it, I would be greatfull there would be solution, here is the situation in attachment, and let me give HTML and CSS codes

HTML CODE

<!DOCTYPE html>

<?php

include ("functions/functions.php");

?>

<html>

<head>

</head>

<body>

</div>

<li><a href="#">all products</a></li>

<li><a href="#">my account</a></li>

<li><a href="#">shopping cart</a></li>

<li><a href="#">contact us</a></li>

</ul>

</form>

</div>

<div id="sidebar_title">categories </div>

<?php getcats(); ?>

</ul>

<div id="sidebar_title">Brands </div>

<?php getBrands(); ?>

</ul>

</div>

<?php getPro ();?>

</div>

</div>

</body>

</html>

----CSS code----

body {background:skyblue;}

.main_wrapper {

width: 1000px;

height: auto;

margin: auto;

}

.header_wrapper {

width: 1000px;

height: 150px;

margin: auto;

}

#logo {float:left; height: 150px;}

#banner {float:right;}

.menubar {

width: 1000px;

height: 50px;

background:gray;

color: white;

}

#menu {

padding: 0;

margin: 0;

line-height: 35px;

float: left;

}

#menu li {

list-style: none;

display: inline;

}

#menu a {

text-decoration: none;

color: white;

padding: 8px;

margin: 5px;

font-size: 18px;

font-family: COMIC SANS MS;

}

#menu a:hover {

color: orange;

font-weight: bolder;

text-decoration: underline;

}

#form {

float: right;

padding-right:8px;

line-height: 40px;

}

.content_wrapper {

width: 1000px;

margin: auto;

background: pink;

}

#content_area {

width:500px;

float:left;

background: pink;

}

#sidebar {

width: 200px;

background:black;

float: left;

}

#sidebar_title {

background-color: white;

color: black;

font-size: 22px;

font-family: arial;

padding:10px;

text-align: center;

}

#cats {

padding:0;

text-align: left;

}

#cats li {

list-style: none;

text-align: left;

margin: 5px;

}

#cats a {

color: white;

text-align: left;

font-size: 22px;

font-family: comic Sans MS;

text-decoration: none;

}

#cats a:hover {

color: orange;

font-weight: bolder;

text-decoration: underline;

}

#footer {

width: 1000px;

height: 100px;

background: gray;

clear: both;

}

#products_box {

width: 780px;

text-align: center;

margin-left: 30px;

margin-bottom: 10px;

}

#single_product {

float: left;

margin-left: 20px;

padding: 10px;

}

davej · August 14, 2015

You should apply a class to each product, not an id, and such class and id spellings must match exactly.

function getPro() {	global $con;	$get_pro="select * from products order by RAND () LIMIT 0,5";	$run_pro=mysqli_query($con, $get_pro);	while ($row_pro=mysqli_fetch_array($run_pro)) {		$pro_id=$row_pro['product_id'];		$pro_cat=$row_pro['product_cat'];		$pro_brand=$row_pro['product_brand'];		$pro_title=$row_pro['product_title'];		$pro_price=$row_pro['product_price'];		$pro_image=$row_pro['product_image'];		echo "<div class='single_product'><h3>$pro_title</h3><img src='admin/product_images/$pro_image' width='180' height='180' /></div>";	}}

.single_product {float: left;margin-left: 20px;padding: 10px; }

Sign In

products are not floating from right to left

Recommended Posts

Alfraganus

Link to comment

Share on other sites

davej

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity