user2522053 user2522053 - 3 months ago 8
CSS Question

Float left for span and div together is not working the way I want to

So I'm working on a coming soon template and what im trying to reach with my code is here in this photo.

enter image description here

but what im getting in my code is this

enter image description here

My HTML code and CSS code is down below:

<ul id="clockdiv">
<li>
<div class="smalltext">Days</div>
<span class="days"></span>
</li>
</ul>


CSS:

.days{
font-size: 180px;
font-family: "Oswald";
color: #fff;
font-weight: 500;
text-transform: uppercase;
float: left;


}
.smalltext{
font-size: 25px;
font-family: "Oswald";
letter-spacing: 10px;
color: #fff;
text-transform: uppercase;
float: left;
}


Question is how can I float both of them to left like the design?

Answer

Probably it is not a good idea to use floats.

However, the classical answer to your issue would be to use a clear on the second element:

.days {
  font-size: 180px;
  float: left;
  clear: left;
}
.smalltext {
  font-size: 25px;
  float: left;
}
<div class="smalltext">Days</div>
<span class="days">135</span>