CODEWITHSUNDEEP
htmlcss
Roman
Roman

Reputation: 1277

Block occupies white space when on a new line

I have this HTML

.h1 {
  text-transform: uppercase;
  max-width: 50%;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
}
.scada {
  font-family: Scada, sans-serif;
}
.left {
  float: left;
}
<h1 class="h1 scada left">Laptop Lenovo IdeaPad 100 (80MJ003YUA)</h1>
<div class="code left">code: U0140224</div>

On big resolution it works just fine. enter image description here

But when the resolution gets smaller, and the text in this h1 tag (by the way I tried swapping it with a div tag, no difference) goes on a new line, the tag still occupies space on it's right. enter image description here

It's not margin/padding/border for sure. I've also tried changing the max-width. Nothing helped so far. Any ideas?

UPDATE Sorry, I didn't ask the question properly. I need to be just like it is, on a new line, but not to occupy the whitespace on it's right.

Upvotes: 1

Views: 134

Answers (2)

Udhay Titus
Udhay Titus

Reputation: 5869

.h1 {
  text-transform: uppercase;
  max-width: 79%;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  word-break: break-all;
}
.scada {
  font-family: Scada, sans-serif;
}
.left {
  float: left;
}
<h1 class="h1 scada left">Laptop Lenovo IdeaPad 100 (80MJ003YUA)</h1>
<div class="code left">code: U0140224</div>

Upvotes: 1

O_Z
O_Z

Reputation: 1563

This is because the browser tries not to creak the word in the middle, so your div is actually bigger then the text, however the line is broken early not to break the word. add:

  word-break: break-all;

To your div to see the difference.Here is an example:JSfiddle

Upvotes: 3

Related Questions