Shopping Cart - Basic Layout

Uses CSS to layout for a basic web site, such as might be used for a shopping service.

HTML

<header>
    <h1>Shopping Cart</h1>
</header>
<div id="container"> 
    <sidebar id="store">
        <div class="product" onclick="alert('Item 1');">Item 1</div>
        <div class="product" onclick="alert('Item 2');">Item 2</div>
        <div class="product" onclick="alert('Item 3');">Item 3</div>
        <div class="divButton" onclick="alert('Reset');">Reset</div>
    </sidebar>
    <div id="shopping">
        <div id="customer">Customer Details</div>
        <div id="invoice">Products Purchased here</div>
    </div>
</div>
<footer>
    <p>Brought to you by Business Web Technologies</p>
</footer>

CSS

header, footer {
    height: 50px;
    width: 100%;
    background-color: darkblue;
    color: white;
    text-align: center;
    position: absolute;
}

/* Set size of headlines elements in header */
header h1,h2,h3,h4,h5,h6 {
    margin-top: 10px;
    font-size: 30px;
    padding: 0px;
}

footer {
    position: absolute;
    bottom: 0px;
}

#store {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 25%;
    height: 100%;
    background-color: steelblue;
    overflow: scroll;
}

#container {
    position: absolute;
    top: 50px;
    bottom: 50px;
    width: 100%;
    background-color: pink;
}

#shopping {
position:absolute;
    top: 0px;
    right: 0px;
    width: 75%;
    height: 100%;
    background-color: palegoldenrod;
    overflow: scroll;
}

#customer, #invoice {
 position:relative;

    background-color: white;
    width: 92%;
    margin-left: 3%;
    margin-right: 3%;
    margin-top: 5px;
    padding: 5px;
}

.product {

    background-color: white;
    width: 100px;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    cursor: pointer;
    box-shadow: 5px 5px 3px black;
}

.product p {
    margin: 0;
}

.product img {
    width: 70%;
    height: auto;
}

.product:hover {
    background-color: slategray;
    color: white;
}

.divButton {
    background-color: lightgray;
    color: black;
    cursor: pointer;
    padding: 5px;
    margin: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 50px;
    border: 2px solid;
    border-radius: 10px;
}

body {
    margin: 0;
    padding: 0;
    background-color: red;
}