[Solved] A problem in aligning

[yash02]

I have got this HTML and CSS code

Codepen Link:
http://codepen.io/yash02/pen/aOdWxo.html

All things worked fine but the two div that appear to be two boxes in browser are set up in vertical way i.e., top box is of subway surfer and just below it comes the nova 3 box.

I need them to align side by side i.e. the subway surfer box should come on left side and nova3 box should come on right and it should further continue.

Please help fast. Thanks In Advance.

From a css beginner and html intermediate. :)

[Paulie_D]

Let’s start at the beginning.

You can’t re-use IDs on the same page (see #box & #image in your code)…they must be unique..hence “ID”.

If you want to use styles more than once, use a class instead.

[Paulie_D]

Now…as for getting the boxes to line-up you have a few options but the main two will be display:inline-block and float (usually but not always left).

This is inline-block.

http://codepen.io/Paulie-D/pen/vOLZBx

They have there own little issues to deal with but you can learn about them and other layout methods at LearnLayout.com

[rafaeljuarez]

the ID thing is not true. you CAN do it.
the “whould or not should” do it its s different issue. but indeed you CAN repeat and control via css infinite element with the same ID.

[Paulie_D]

the ID thing is not true. you CAN do it.
the “whould or not should” do it its s different issue

True enough I suppose strictly speaking but it’s incredibly poor practice and suggesting poor practices is a poor idea of it’s own.

This is even more true when using JS.

We have classes for a reason and we should use them instead of re-using IDs.

In fact, I can’t think of a single reason why one would need to re-use an ID.

[Author]

Posts