Div Elements to alight right to each other CSS

Question

I'm trying to make all blue box to align right to each other. How can I set blue boxes to align right to each other?

The Code (https://jsfiddle.net/58439865/):

.page2 {
  max-width: 560px;
  height: 600px;
  background-color: gray;
  align:right;
  margin-top: 20px;
  margin-right: 20px;
  margin-left: 20px;
  border-style: solid;
  max-height: 100%;
  width: auto;
}
#TimeTable {
  max-width: 60px;
  height: 60px;
  background-color: blue;
  align: left;
  margin-right: 20px;
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-style: solid;
  max-height: 100%;
  width: auto;
}

<section class="vertical-scrolling">     
  <div class="page2" >
    <div id="TimeTable"></div>
    <div id="TimeTable"></div> 
    <div id="TimeTable"></div> 
    <div id="TimeTable"></div>
  </div>
</section>

Before posting a new problem, try finding it in google or stackoverflow previous posts. [Like this post](http://stackoverflow.com/questions/5803023/how-to-place-two-divs-next-to-each-other) or [this](overflow.com/questions/446060/css-two-divs-next-to-each-other) or many others — Mike B, Apr 15 '16 at 12:19
@AsadAli you can't have same id more than once in a single page, please use class instead... — Mohammad Usman, Apr 15 '16 at 12:19
@theblindprophet i wanted blue boxes to align right of prevous box — AsadAli, Apr 15 '16 at 12:24

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

first of all , you must not give same id to more than one element in html. in case if you want to give same reference to more than one element you must use class instead of id.. so, just replace id with class ,and class with id. the code blow must work.. reply if you have any problem.

HTML

<section class="vertical-scrolling">     
   <div id="page2" >
       <div class="TimeTable">
       </div>
       <div  class="TimeTable" >
       </div> 
       <div  class="TimeTable" >
       </div> 
       <div  class="TimeTable" >
       </div>
   </div>
</section>

try this code in css.

CSS

#page2{
    max-width: 560px;
    height: 600px;
    background-color: gray;
    align:right;
    margin-top: 20px;
    margin-right: 20px;
    margin-left: 20px;
    border-style: solid;
    max-height: 100%;
    width: auto;
}

.TimeTable{
    max-width: 60px;
    height: 60px;
    background-color: blue;
    float: left;
    margin-right: 20px;
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-style: solid;
    max-height: 100%;
    width: auto;
}

score 0 · Accepted Answer · answered Apr 15 '16 at 12:36

0

#TimeTable{float: left;
width: 100%;}

just add this lines

answered Apr 15 '16 at 12:36

Amit Kumar Pawar

3,252
1
20
27

Div Elements to alight right to each other CSS

2 Answers2

HTML

CSS