It's always a struggle when the easy things seem hard and the hard things seem easy!
I'm not sure why I'm having trouble with what should be a simple html and/or css issue, but here I am seeking help.
Take a look at the screenshot to see the visual representation of my problem. It seems like my elements are all over the place despite checking my divs and HTML syntax. The CSS appears to be correct, but I may have missed something in the structure. I need a fresh perspective to spot what I can't seem to see.
Here is the getItem function() that I've added:
function getItem(){
global $con;
//limit to just getting 6 random products per page
$get_item = "select * from items order by RAND() LIMIT 0,6";
$run_item = mysqli_query($con,$get_item);
//using while loop to get multiple data from items table
while($row_item = mysqli_fetch_array($run_item)){
$item_id = $row_item['item_id'];
$item_cat = $row_item['item_cat'];
$item_brand = $row_item['item_brand'];
$item_title = $row_item['item_title'];
$item_price = $row_item['item_price'];
$item_image = $row_item['item_image'];
echo "
<div id='single_item'>
<h3>$item_title</h3>
<img src='admin_area/item_imgs/$item_image' width='180' height='180'/>
";
}
}
Click here for a screenshot of the issue.
/* Stylesheet reset borrowed from http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {background: skyblue;}
.wrapper_main {width:1000px; height:auto; margin:auto; background:black;}
.wrapper_header {width:1000px; height:100px; margin:auto;}
/* Additional styles omitted for brevity */
#footer {width:1000px; height:100px; background:gray; clear:both;}