CODEWITHSUNDEEP
css
eric
eric

Reputation: 99

How to align two texts towards the left precisely

I am learning in CSS; I would like to reduce the spacacing between the text "138 running days" and "[email protected]" into my header but I don't understand how to make it?

I think the problem is here ?

.header-left {
        padding-left: 150px;
}

I don't know if it exists a priority to make it ?

Thank you very much for your help and time.

enter image description here

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
    margin: 0;
    padding: 0;
}

.txt10 {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    color: red;
}

.header-page{
   display: flex;
   flex-flow: row wrap;
   background-color: aqua; 
   height: 20px;
   padding-top: 13px;
   padding-bottom: 13px;
}

.header-left {
    padding-left: 150px;
}

.header-left:nth-child(2){ /* mettre certains éléments vers la droite */ 
    margin-right: auto;

}

.header-right{
    padding-right: 20px;
   
}

#dropDown-languages{
    background-color: red;
    width: 75px;
    height: 20px;
    margin-right: 20px;
}
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>SuperBtc by Soufiane</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
</head>
<body>
  <div class="header-page">
    <div class="header-left txt10"><i class="far fa-calendar"></i>138 running days</div>
    <div class="header-left txt10"><i class="far fa-envelope"></i>[email protected]</div>
    <select name="dropDown-languages" id="dropDown-languages">
      <option value="english">English</option>
      <option value="french">French</option>
    </select>
    <div class="header-right txt10"><i class="fas fa-angle-right"></i> deposit</div>
    <div class="header-right txt10"><i class="fas fa-angle-right"></i> paidout</div>
  </div>
 
</body>
<script src="script.js"></script>
</html>

Upvotes: 0

Views: 72

Answers (4)

Kiran Mistry
Kiran Mistry

Reputation: 2725

To reduce space between two texts like 138 running and admin@s.. you need to add below code in your existing code:

.header-left:nth-child(2){ /* mettre certains éléments vers la droite */ 
    margin-right: auto;
    padding-left: 35px;  // add this line you can give px based on your requirement
}

Here is full example:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
    margin: 0;
    padding: 0;
}

.txt10 {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    color: red;
}

.header-page{
   display: flex;
   flex-flow: row wrap;
   background-color: aqua; 
   height: 20px;
   padding-top: 13px;
   padding-bottom: 13px;
}

.header-left {
    padding-left: 150px;
}

.header-left:nth-child(2){ /* mettre certains éléments vers la droite */ 
    margin-right: auto;
    padding-left: 35px;
}

.header-right{
    padding-right: 20px;
   
}

#dropDown-languages{
    background-color: red;
    width: 75px;
    height: 20px;
    margin-right: 20px;
}
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>SuperBtc by Soufiane</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
</head>
<body>
  <div class="header-page">
    <div class="header-left txt10"><i class="far fa-calendar"></i>138 running days</div>
    <div class="header-left txt10"><i class="far fa-envelope"></i>[email protected]</div>
    <select name="dropDown-languages" id="dropDown-languages">
      <option value="english">English</option>
      <option value="french">French</option>
    </select>
    <div class="header-right txt10"><i class="fas fa-angle-right"></i> deposit</div>
    <div class="header-right txt10"><i class="fas fa-angle-right"></i> paidout</div>
  </div>
 
</body>
</html>

You can also play with the code here.

Upvotes: 1

Rounin
Rounin

Reputation: 29463

Rather than two <div> elements:

<div class="header-left txt10"><i class="far fa-calendar"></i>138 running days</div>
<div class="header-left txt10"><i class="far fa-envelope"></i>[email protected]</div>

consider an unordered list (<ul>):

<ul class="header-left txt10">
  <li><i class="far fa-calendar"></i>138 running days</li>
  <li><i class="far fa-envelope"></i>[email protected]</li>
</ul>

Using this structure you can have .header-left as a class of the parent, without affecting the presentation of either of the children.

Working Example:

header {
  display: block;
  border: 1px dashed blue;
}

.header-left {
  margin-left: 150px;
  padding-left: 0;
}

.header-list-item {
  display: inline-block;
  margin-right: 24px;
  border: 1px dashed red;
}
<header>
<ul class="header-left txt10">
  <li class="header-list-item"><i class="far fa-calendar"></i>138 running days</li>
  <li class="header-list-item"><i class="far fa-envelope"></i>[email protected]</li>
</ul>
</header>

Upvotes: 1

Ashish Neupane
Ashish Neupane

Reputation: 241

I'd advice you to add margin-right into your "header-left" class items and a padding-left in "header-page" class. That way you wouldn't have to use the :nth-child selector and your code lines will reduce.

Upvotes: 2

Charles Lavalard
Charles Lavalard

Reputation: 2321

As you said you can fix it with a lower padding-left

and apply this rule to the div you want

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
body {
  margin: 0;
  padding: 0;
}

.txt10 {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  color: red;
}

.header-page {
  display: flex;
  flex-flow: row wrap;
  background-color: aqua;
  height: 20px;
  padding-top: 13px;
  padding-bottom: 13px;
}

.header-left {
  padding-left: 150px;
}

.header-left:nth-child(2) {
  /* mettre certains éléments vers la droite */
  padding-left: 50px;
  margin-right: auto;
}

.header-right {
  padding-right: 20px;
}

#dropDown-languages {
  background-color: red;
  width: 75px;
  height: 20px;
  margin-right: 20px;
}
<!doctype html>
<html lang="fr">

<head>
  <meta charset="utf-8">
  <title>SuperBtc by Soufiane</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
</head>

<body>
  <div class="header-page">
    <div class="header-left txt10"><i class="far fa-calendar"></i>138 running days</div>
    <div class="header-left txt10"><i class="far fa-envelope"></i>[email protected]</div>
    <select name="dropDown-languages" id="dropDown-languages">
      <option value="english">English</option>
      <option value="french">French</option>
    </select>
    <div class="header-right txt10"><i class="fas fa-angle-right"></i> deposit</div>
    <div class="header-right txt10"><i class="fas fa-angle-right"></i> paidout</div>
  </div>

</body>
<script src="script.js"></script>

</html>

Upvotes: 1

Related Questions