CODEWITHSUNDEEP
htmlcss
0x0001
0x0001

Reputation: 255

Div with nowrap still wraps

I want to make the div stay the same size while I resize the window. My css for the div:

.header {
    white-space: nowrap;
    color: #fff;
    padding: 0.5em;
    background: linear-gradient(90deg, #B71C1C, #0D47A1, #0D47A1);
  }

and here is the output before the wrap:

enter image description here

and after the wrap:

enter image description here

what I want is to header div always stay the same size no matter the browser's width.

Upvotes: 1

Views: 2792

Answers (2)

KevDev
KevDev

Reputation: 150

The "white-space:nowrap" property is meant for text wrapping, not for general responsiveness of your elements. https://www.w3schools.com/cssref/pr_text_white-space.asp

You either want to add a fixed "width" property (f.e. in pixels), or a "min-width" property to your element.

Upvotes: 3

Tony
Tony

Reputation: 3068

I think the white-space: nowrap property is used to stop text from wrapping. In your case you might want to set a fixed width for that div so that it will not change based on the window size.

Upvotes: 1

Related Questions