Jump to content

Multiple Columns


brooke_theperson

Recommended Posts

Here is my code:

 

 

<!DOCTYPE html><html lang="en"><head>    <link rel='stylesheet' href='style.css'/><meta charset="utf-8"/><title>title</title><style></style><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+'  Column: '+d);return true;}</script><script>'use strict';window.onload = init;function init() {var str = "<h3>Available Products:</h3>";for (var key in products){str += products[key].name +" $"+ products[key].price +"<br/>";}document.getElementById("products").innerHTML = str;}function add(item){cart.push(products[item]);var str = "<h3>Items in your cart:</h3>";for (var key in cart){  str += cart[key].name +" $"+ cart[key].price +"<br/>";}document.getElementById("cart").innerHTML = str;console.log(products[item]);};function item(name,price){    this.name = name;    this.price = price;};function add(item){var sum = 0;cart.push(products[item]);var str = "<h3>Items in your cart:</h3>";for (var key in cart){  str += cart[key].name +" $"+ cart[key].price +"<br/>";  sum += Number(cart[key].price);}   str += '<br/><b>Total = $' + sum.toFixed(2) +'</b>';document.getElementById("cart").innerHTML = str;console.log(products[item]);}var products = [];products["milk"] = new item("Milk",2.89)products["eggs"] = new item("Eggs",1.72)products["candybar"] = new item("Candy bar",0.87)products["soda"] = new item("Soda",1.99)products["water"] = new item("Water",1.29)products["cereal"] = new item("Cereal",1.87)products["donut"] = new item("Donut",1.09)products["chips"] = new item("Chips",1.99)products["magazine"] = new item("Magazine",2.79)products["nwspaper"] = new item("Newspaper",0.99)products["bagel"] = new item("Bagel",0.99)products["fruit"] = new item("Fruit",1.99)products["cgrtts"] = new item("Cigarettes",5.99)products["batteries"] = new item("Batteries",3.99)var cart = [];function buyItem() {    var buy = prompt("What item do you want to buy?").toLowerCase();    switch(buy){        case 'milk':add("milk");break;        case 'eggs':add("eggs");break;        case 'candy bar':add("candybar");break;        case 'soda':add("soda");break;        case 'water':add("water");break;        case 'cereal':add("cereal");break;        case 'donut':add("donut");break;        case 'chips':add("chips");break;        case 'magazine':add("magazine");break;        case 'newspaper':add("nwspaper");break;        case 'bagel':add("bagel");break;        case 'fruit':add("fruit");break;        case 'cigarettes':add("cgrtts");break;        case 'batteries':add("batteries");break;        default: alert("We do not sell that item!");           console.log("We do not sell that item!");    }}</script></head><body><div class="header">    <h3 style="font-family: corsiva; font-size: 25; color: indigo;">Cash Register<h3></div><div class="left">    <button style="font-family: corsiva; font-size:22;  border:2px solid black; border-radius: 100%;" onclick="buyItem()"><strong>What item do you want to buy?</strong></button><div class="right">        <div id="products">        </div>        <div id="cart">        </div></div><div class="footer">    <h5>Brooke Simmerman</h5></div></body></html>

 

What I would like is for the list of products to appear in two columns so that I have space for more items. With what I have now, some of the items continue vertically into the footer div. I would rather they continue in another column next to the first. How do I do this?

Link to comment
Share on other sites

I hope someone else gets you an answer that more directly answers your question, but I feel I'd be remiss if I didn't mention this bit of wisdom from User Interfaces 101..."If your drop-down needs a scrollbar, you should probably use a listbox instead."Imagine trying to navigate a two-column drop-down on a touch screen and you might decide to change your strategy.

Link to comment
Share on other sites

  • 1 year later...

I had a similar problem and the two biggest keys to fixing the column issue from me was putting the height and width along with the -columns # in the right locations... I have it working on the page I am using but when I load the page in the iframe of the main page... columns disappear.

 

Just learning html and css myself.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...