Как сдвинуть div в самый край header? (html css)

Question

Начал учить html/css пару дней назад. Подскажите как в данном коде сдвинуть в самое право, но чтобы при изменении размера окна оно так и оставалось с правого края страницы.

body {
  margin: 0px 0px 0px 0px;

}
#mainHeader {
  height: 30px;
  background-color: rgb(49,71,129)
}
#tableHeader {
  padding-left: 5px;
  padding-top: 5px;
  display: table;
}
#tableHeaderRow {
  display: table-row;
}
#tableHeaderImg {
  display: table-cell;
  vertical-align: top;
  text-align: center;
  padding-right: 5px;
}
#tableHeaderName {
  display: table-cell;
  text-align: center;
  vertical-align: top;
}
#tableHeaderImg2 {
  display: table-cell;
  vertical-align: top;
  text-align: center;
}

<html>
  <head>
    <meta charset='utf-8'>
    <link type='text/css' rel='stylesheet' href='css/main.css'>
    <title>IQ Tests Site </title>
  </head>
  <body>
    <header id ='mainHeader'>
      <div id='tableHeader'>
        <div id='tableHeaderRow'>
          <div id='tableHeaderImg'>
            <img src='images/' alt='logo'>
          </div>
          <div id='tableHeaderName'>
            | IQ Tests Site
          </div>

          <div id='tableHeaderImg2'>
            <img src='images/russia.png' alt='russian flag' width= '30' height = '20'>
          </div>
        </div>
      </div>
    </header>
  </body>
</html>

Answer 1

margin-left: auto; блоку который нужно сдвинуть

body {
  margin: 0px 0px 0px 0px;

}
#mainHeader {
  height: 30px;
  background-color: rgb(49,71,129)
}
#tableHeader {
  padding-left: 5px;
  padding-top: 5px;
  display: table;
  margin-left: auto;
}
#tableHeaderRow {
  display: table-row;
}
#tableHeaderImg {
  display: table-cell;
  vertical-align: top;
  text-align: center;
  padding-right: 5px;
}
#tableHeaderName {
  display: table-cell;
  text-align: center;
  vertical-align: top;
}
#tableHeaderImg2 {
  display: table-cell;
  vertical-align: top;
  text-align: center;
}

<html>
  <head>
    <meta charset='utf-8'>
    <link type='text/css' rel='stylesheet' href='css/main.css'>
    <title>IQ Tests Site </title>
  </head>
  <body>
    <header id ='mainHeader'>
      <div id='tableHeader'>
        <div id='tableHeaderRow'>
          <div id='tableHeaderImg'>
            <img src='images/' alt='logo'>
          </div>
          <div id='tableHeaderName'>
            | IQ Tests Site
          </div>

          <div id='tableHeaderImg2'>
            <img src='images/russia.png' alt='russian flag' width= '30' height = '20'>
          </div>
        </div>
      </div>
    </header>
  </body>
</html>

БЛОГ НА HUSL

Как сдвинуть div в самый край header? (html css)

Ответы (1 шт):