CODEWITHSUNDEEP
htmlcss
user2522053
user2522053

Reputation: 67

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:

.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;
}
<ul id="clockdiv">
  <li>
    <div class="smalltext">Days</div>
    <span class="days"></span>
  </li>
</ul>

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

Upvotes: 2

Views: 1154

Answers (4)

Wais Kamal
Wais Kamal

Reputation: 6180

Just consider using "div" elements to wrap and align the text:

HTML

<html>
  <body>
    <div class="wrapper1">Days</div>
    <div class="wrapper2">136</div>
  </body>
</html>

CSS

.wrapper1 {
  position:    relative;
  width:       100%;
  text-align:  left;
  font-size:   25px;
  font-family: Oswald;
}

.wrapper2 {
  position:    relative;
  width:       100%;
  text-align:  left;
  font-size:   180px;
  font-family: Oswald;
}

.wrapper2 p {
  letter-spacing: 10px;
}

Upvotes: 0

vals
vals

Reputation: 64164

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>

Upvotes: 2

Obaidul Kader
Obaidul Kader

Reputation: 217

you can use left margin to days class or you dont's need to use float left just use to div and margin to days div.

Upvotes: 0

Tyler Roper
Tyler Roper

Reputation: 21672

Simple: Remove float altogether.

I believe you've slightly overthought this. float specifically tells elements to position themselves adjacently, whereas your desired appearance seems to be the exact opposite.

Block elements like <div> will naturally appear atop one another and left-aligned unless instructed otherwise, so by removing the float: left; from both elements, you should be able to achieve your desired look.

Additionally, just to satiate my own curiosity... I'm assuming there's a reason you're using <ul> and <li> list elements for this (which doesn't seem to be a list of any sort)?

Upvotes: 5

Related Questions