CODEWITHSUNDEEP
htmlcss
Luke Toss
Luke Toss

Reputation: 386

Correctly align Divs - HTML/CSS

#left {
  float: left;
  width: 15%;
  overflow: hidden;
}

#right {
  float: left;
  width: 60%;
  overflow: hidden;
}

#cen {
  display: inline-block;
  width: 5%;
  overflow: hidden;
}

#container {
  width: 100%;
  text-align: center;
}
<div id="container">
  <h1>
    <div align="center" id="cen">+</div>
  </h1>
  <h1>
    <div align="center" class="Area" id="left">1</div>
  </h1>
  <h1>
    <div align="center" class="Phone" id="right">650000</div>
  </h1><br>
</div>

enter image description here

The grey area is my container DIV The Top is what I have The bottom is what I want.

Nothing I do sligns them correctly, or pushing one div to the next line. Its so frustrating I'm about to smash my computer

Upvotes: 0

Views: 101

Answers (1)

Temani Afif
Temani Afif

Reputation: 274237

Why not simply use span and some margin:

h1 {
  text-align: center;
}

span {
  margin: 10px;
}
<h1><span>+</span><span>1</span><span>650000000</span></h1>

you can then change individual margin by adding some class

Upvotes: 5

Related Questions