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>
<title>my ecom web</title>
<link rel="stylesheet" href="styles/style.css" media="all" />
</head>
<body>
<div class="main_wrapper">
<div class="header_wrapper">
<img id="logo" src="images/images.jpg"/>
<img id="banner" src="images/sws_logo.gif" />
</div>
<div class="menubar">
<ul id="menu">
<li><a href="#">home</a></li>
<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>
<div id="form">
<form method="get" action="results.php" enctype="multipart/form-data">
<input type="text" name="user_query" placeholder="search a product" />
<input type="submit" name="search" value="Search"/>
</form>
</div>
</div>
<div class="content_wrapper">
<div id="sidebar">
<div id="sidebar_title">categories </div>
<ul id="cats">
<?php getcats(); ?>
</ul>
<div id="sidebar_title">Brands </div>
<ul id="cats">
<?php getBrands(); ?>
</ul>
</div>
<div id="content_area">
<div id="products_box">
<?php getPro ();?>
</div>
</div>
<div id="footer">
<h2 style="text-align:center; padding-top:30px;">©2015 by Alfraganus</h2>
</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;
}
index.php
style.css
insert_product.php
functions.php
db.php