CODEWITHSUNDEEP
htmlcss
diodepain
diodepain

Reputation: 39

CSS div with full width but doesn't wrap text

I am trying to create a navigation element (nav) that spans the full width of the page, but when the windows shrinks enough where the text overflows, the text wraps. As this is the navigation bar for the page, I'd prefer it didn't wrap and the page just scrolls when the nav's content overflows it. I was thinking giving it a width in pixels instead of just 100% would work, but I don't know how to make it the full width on every screen using pixels. Any idea how to do this? I am using SASS too if that could help with a solution.

Basically, I need a solution that makes a element act as though its width were set to 100%, but it can't wrap the text if there's overflow. The window should scroll if there's overflow.

Upvotes: 0

Views: 2366

Answers (2)

Alexander
Alexander

Reputation: 4219

I think your best bet would be to set a minimum width on your nav element. This way, it will only scale your div to a certain point so it doesn't wrap. The only downside of this is that you need to specify a width, but the upside is it works without any of the div being cut off.

http://jsfiddle.net/piedoom/Km4Xa/1/

You can see in my CSS I have the following:

div
{
width: 100%;
background: red;
min-width: 250px;
}

The min width specifies how small the div can get before it just stays at that value instead of taking the window as it's width.

You can also apply this to the body so it works on all elements.

Upvotes: 1

Damien Black
Damien Black

Reputation: 5647

Put in the css style white-space:nowrap;

If you want a scroll bar in the div, go for overflow:scroll; and set a height of one line, and don't use nowrap.

Full width should be easy: width: 100%

If you want specifics, show us your code.

Upvotes: 2

Related Questions