How to make two div align side by side?

Question

I have been trying to make two divs float side by side or basically the shopping cart and the items (namely jcart and cartbox) but cant seem to get it. Here is the demo: link

i tried change float:right; on the cartbox css but that would only move the shopping cart to the right and if I remove the float on the cartbox css.. The cart and the items align side by side but for some reason cart appears to be really small and the "add to cart" button doesn't appear to click. Any help will be appreciated!

HTML:

  <form method="post" action="" class="jcart">
    <fieldset>
      // item details here
    </fieldset>
  </form>

  <div class='cartbox'>
    <div id="jcart"><?php $jcart->display_cart();?></div>
    <div id='jcart-loader'><img src='img/ajax-loader.gif' alt=''></div>
  </div>

CSS:

#jcart {
position:relative;
font-size:1.15em;
top:0;
margin:0 0 .75em;
}

.jcart {
width:135px;
margin:0 20px 20px 0;
padding-top:20px;
border:solid 2px #E5E5E5;
float:left;
background:#F0F0F0;
text-align:center;
}

.cartbox {
float:left;
position:relative;
top:0;
width:500px;
margin:0;
padding:0;
}

Please search SO before asking new questions. You'll find this question asked many times over! — Lee Taylor, May 24 '14 at 23:23
A down vote is a little harsh! I worked on it for quite a bit time before posting but I still apologize. — bondbaby11, May 24 '14 at 23:32
Could also just use span tag since its default display is inline-block. — cchamberlain, Jul 23 '16 at 13:46

Sam Holmes · Accepted Answer · 2018-01-14T21:37:08.077

You need to add display: inline-block on the elements you wish to align side by side, as div elements have a default style of display: block, meaning they will stack vertically instead of horizontally (not the behaviour you want).

From the looks of it; the shopping cart box is too wide to fit side by side in the content container as well. Make the div with the id centre wider (possibly to 1000px instead of 960px), and coupled with the addition of changing the display property, that should do it.

In terms of the code you need to write directly in order to get this to change, do the following:

#centre {
    width: 1000px;
}

.cartbox {
    display: inline-block;
}

EDIT: I modified these changes to your website locally and it appears to have worked.

enter image description here

score 2 · Answer 2 · answered May 24 '14 at 23:16

2

add float:left to your css code in #jcart:

#jcart {
position:relative;
float:left
font-size:1.15em;
top:0;
margin:0 0 .75em;
}

answered May 24 '14 at 23:16

AssemblyX

1,841
1
13
15

That didn't work... cart just appeared on the left but still underneath the items – May 24 '14 at 23:21

score 1 · Answer 3 · answered May 24 '14 at 23:15

1

You can use display property to inline or inline-block as @Sam Holmes said

or you can do something using float. like this:

.cartbox div{
    float:left;
}

or

.cartbox div{
     display:inline;// or display:inline-block;
}

here is the Demo

answered May 24 '14 at 23:15

super

2,288
2
21
23

score 1 · Answer 4 · answered May 24 '14 at 23:15

1

It is because you don't have enough space in the parent Divs. I tried to set it to 10px and it allinged fine.

answered May 24 '14 at 23:15

Celestial Dragon of Osiris

386
3
6
16

How to make two div align side by side?

4 Answers4

Linked