Text Stacking Over Itself

Question

I am working on a website from a template, and for some reason the text in the lower left corner stacks on itself when I reduce the window size. I am by no means an expert in HTML/CSS but I can't seem to figure out why exactly it is doing this. I've tried messing with the div properties and the z-index. It looks like this

The problem

My HTML code:

<!-- Site Logo -->
    <div id="logo">salem music</div>

CSS:

#logo {
font-family: 'Coustard', serif;
font-size: 49px;
bottom:40px;
height:auto;
left:40px;
position:absolute;
width:20%;
z-index:1000;
color: #fff;
}

I'd like it to look like

This

The width of that element becomes to narrow to show both words without wrapping to the next line (`width:20%`). What would you like to happen instead? (e.g. words overflow the container instead of wrapping) — showdev, Jun 17 '16 at 00:11
If the window is too small I'd like all that text to stay static, if possible. Even when the window is relatively large it will stack on itself. — Geoff Weber, Jun 17 '16 at 00:21

score 2 · Accepted Answer · edited May 23 '17 at 12:22

The width is set to 20%. If you decrease the window width, then eventually the #logo element will get too small in width and will cause the text to wrap.

Consider setting a larger width value.

.logo {
  background-color: grey;
  margin: 10px;
}
.logo1 {
  width: 5%;
}
.logo2 {
  width: 75%;
}

<div class="logo logo1">This width is too small and will wrap</div>
<div class="logo logo2">This width is better and won't wrap</div>

Or, if you want to keep it that width, and want to allow text to overflow out of the <div>, you can use white-space: nowrap. However, I wouldn't recommend this, as it would probably overlap the links next to it.

.logo {
  background-color: grey;
  margin: 10px;
}
.logo1 {
  width: 5%;
}
.logo2 {
  width: 5%;
  white-space: nowrap;
}

<div class="logo logo1">This width is too small and will wrap</div>
<div class="logo logo2">This will not wrap even though it is too small</div>

@Bálint made a good point in the comments as well: when possible, use the em unit for measurements instead of percentages. ems are based on font size, rather than window size. Therefore, changing the window wouldn't affect it, but changing the font size would (in a desirable way).

@Bálint I'm using percentages to keep consistent with the OP's CSS. But yes, I will edit that in. — Jonathan Lam, Jun 17 '16 at 00:19
Thank you everyone for your help, adjusting the width made it so that the text stayed in place until the window squished it. — Geoff Weber, Jun 17 '16 at 00:24
I'm still learning and wasn't exactly sure what the width property did, so I'll mess around with that and use em's. — Geoff Weber, Jun 17 '16 at 00:24

Text Stacking Over Itself

1 Answers1