Kaique Prazeres.

Talvez esse link possa ajudá-lo. AJAX Introduction (w3schools.com)

A mensagem de erro diz que o indice que você está tentando acessar não existe no vetor. (array). Ou, você pode esta iterando uma string ou objeto ao invés de array. Certifique-se de que o valor contido em $_SESSION['carrinho'] é um vetor associativo.

Há diversas formas de fazer isso. Seja com float, position, vertical-align ou flexbox. Aqui tratarei de utilizar o módulo do flexbox do CSS3. Segue o exemplo: <div id="box-main"> <article id="left-box"> <header> <h1 title="Cabeçalho A">Cabeçalho A</h1> </header> <p>s simply dummy text of the printing and typesetting industry. Lorem has been the industry’s standard text ever sinn printer took a galley of type and scrambled it to make a </p> </article> <article id="right-box"> <header> <h1 title="Cabeçalho B">Cabeçalho B</h1> </header> <p>s simply dummy text of the printing</p> </article> </div> #box-main, #box-main article, #box-main article p { border:1px solid #000; } #box-main { padding:3em; max-width:80%; margin: 0 auto; display:flex; // Determina como os elementos filhos se comportarão } #box-main article { justify-content: space-between; // Determina o tipo de comportamento que os elementos terão align-items: center; // Alinha os elementos filhos de #box-main na vertical flex: 2; // Determina a quantidade de colunas dentro do #box-main padding: 0 2em; margin: 0 1em; height: auto; } #box-main article header { background-color: #ccc; text-align: center; } #box-main article p { padding: 1em; height: auto; min-height: 60px; // Para que o pagrafo fique sempre centralizado com a mesma altura height: inherit; // Enquanto sua altura padrão é automática e aumentará conforme o conteúdo max-height: 120px; // E aqui delimitamos o limite/ altura máxima } Resultado: Espero ter ajudado :) Referências sobre flexbox: - CSS Flexbox (Flexible Box) (w3schools.com) - A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks