how to place the element side by side in an html page

Question

I'm working on a pomodoro clock and I want to place the controls of the clock to the right of the clock instead of the current position which is down. Right now the html/css code is placing the controls (add time/restart etc) at the bottom of the clock, and I would like to place it to the right. how can I do that? thanks html

<div class="container
  <!-- header title -->
  <div class="title primary-text">
      <h1>Pomodoro Clock</h1>      
  </div>
  <!-- clock / timer goes here -->
  <div class="clock">    
    <div class="timer">
      <h2>Session</h2>
      <h1>23:00</h1>     
    </div>    
  </div>
  <!-- this section for controlling clock -->
  <div class="controls">
    <div class="setTime">
       add time                 
    </div>
    <div class="setTime">
       add time                 
    </div>
    <div class="control">
      play/pause
    </div>
    <div class="control">
      reset
    </div>
  </div>
</div>

css

body {
  background-color: #545454;
}

.title {
  margin: auto;
  text-align: center;
  font-size: 32px;
}

h2 {
  font-size: 50px;
  margin: 0 0 0 0;
}

.timer {
  margin: 0 0 0 0;
  font-size: 44px;
}

.clock {
  margin: auto;
  text-align: center;
  border: solid black 1px;
  width: 500px;
  height: 200px;
}

.controls {
  margin: auto;
  text-align: center;
  border: solid black 1px;
  width: 100px;
}

Possible duplicate of [How to place div side by side](https://stackoverflow.com/questions/2637696/how-to-place-div-side-by-side) — Jack Parkinson, Jul 31 '17 at 13:47
With either `inline-block`, `float`, or `flex-box` styles. What have you already tried? — UncaughtTypeError, Jul 31 '17 at 13:56
both element are inline; however, I would like to have the clock completely centered while the controls remains on the right.. https://codepen.io/pen/?editors=0100 — miatech, Jul 31 '17 at 14:28
sorry, forgot to save. check it again.... https://codepen.io/zentech/pen/eEZdXe — miatech, Jul 31 '17 at 15:24

score 1 · Accepted Answer · answered Jul 31 '17 at 15:15

You can use inline-block for both the .clock and .controls in order to align them. However, since you want the .clock to be centered, you will have to add a bit more code. What I did was create a Container .clockContainer in order to then allow for position: absolute on your .controls. This will remove it form the flow and center your .clock while positioning your controls next to it. Then I added some margin to your clock so the 2 elements don't overlap. You can then manipulate the height location of the Controls as you see fit with a top value:

body {
  background-color: #545454;
}

.title {
  margin: auto;
  text-align: center;
  font-size: 32px;
}

h2 {
  font-size: 50px;
  margin: 0 0 0 0;
}

.timer {
  margin: 0 0 0 0;
  font-size: 44px;
}

.clock {
  margin: 0 10px;
  text-align: center;
  border: solid black 1px;
  width: 500px;
  height: 200px;
  display: inline-block;
}

.controls {
  position: absolute;
  text-align: center;
  border: solid black 1px;
  width: 100px;
  display: inline-block;
}

.clockContainer {
  text-align: center;
  position: relative;
}

<div class="container">
  <!-- header title -->
  <div class="title primary-text">
    <h1>Pomodoro Clock</h1>
  </div>
  <!-- clock / timer goes here -->
  <div class="clockContainer">
    <div class="clock">
      <div class="timer">
        <h2>Session</h2>
        <h1>23:00</h1>
      </div>
    </div>
    <!-- this section for controlling clock -->
    <div class="controls">
      <div class="setTime">
        add time
      </div>
      <div class="setTime">
        add time
      </div>
      <div class="control">
        play/pause
      </div>
      <div class="control">
        reset
      </div>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Jul 31 '17 at 13:47

0

Instead of margin:auto you can use float: left or display: inline-block. check updated CSS below..

.clock {
  /*margin: auto;*/
  float: left;
  text-align: center;
  border: solid black 1px;
  width: 500px;
  height: 200px;
}

.controls {
  /*margin: auto;*/
  float: left;
  text-align: center;
  border: solid black 1px;
  width: 100px;
}

answered Jul 31 '17 at 13:47

Super User

9,448
3
31
47

yes but I would like the clock to be centered and the controls on the right edge of the screen – miatech Jul 31 '17 at 13:55

Rohit Verma · Answer 3 · 2017-07-31T14:06:39.367

I think you need this

to make .clock center you can use display:inline-block; inside .clock and .controls with text-align:center; inside .container

body {
  background-color: #545454;

}

.container{
  text-align:center; 
 }

.title {
  margin: auto;
  text-align: center;
  font-size: 32px;
}

h2 {
  font-size: 50px;
  margin: 0 0 0 0;
}

.timer {
  margin: 0 0 0 0;
  font-size: 44px;
}

.clock {
  margin: auto;
  text-align: center;
  border: solid black 1px;
  width: 400px;
  height: 200px;
  display:inline-block;
}

.controls {
  text-align: center;
  border: solid black 1px;
  width: 100px;
  display:inline-block;
}

<div class="container">
  <!-- header title -->
  <div class="title primary-text">
      <h1>Pomodoro Clock</h1>      
  </div>
  <!-- clock / timer goes here -->
  <div class="clock">    
    <div class="timer">
      <h2>Session</h2>
      <h1>23:00</h1>     
    </div>    
  </div>
  <!-- this section for controlling clock -->
  <div class="controls">
    <div class="setTime">
       add time                 
    </div>
    <div class="setTime">
       add time                 
    </div>
    <div class="control">
      play/pause
    </div>
    <div class="control">
      reset
    </div>
  </div>
</div>

You can use this customize code inside `.controls` `float:right; margin-right:372px; margin-top:-202px;` and remove `display:inline-block;` from `.clock` — Rohit Verma, Jul 31 '17 at 14:27
in this example the clock is not center. how could I center the clock and still have the controls to the ritht? https://codepen.io/pen/?editors=0100 — miatech, Jul 31 '17 at 14:27

how to place the element side by side in an html page

3 Answers3