[thelist] [CSS] div width and white-space: nowrap

Mark M mark at safefrombees.com
Wed Mar 31 20:20:44 CST 2004


Hey all - 

Got a CSS prob. Using XHTML :o)

Got a little box that I dynamically populate with an error message.

No biggie there.

(It's on an intranet, so you can't see it - sorry!)

It has a header across the top that says 'Error', which has a background of red, and *should 
be* 100% of the way across.

Now, I don't want the error message to wrap, but stretch the div.

The code I am using is as follows:

HTML:

<div id="errorBox">
<h5 id="errorHeader">Error</h5>
<div id="errorInnerBox">
There was a problem with the login details for User ID 'fsad'.
<br/>
</div>
</div>

CSS:

div#errorBox {
	border: 1px solid #FF0033;	
	width: 10%;
	margin-top: 10px;
	margin-bottom: 10px;
}


h5#errorHeader {
	color: #FFFFFF;
	width: 100%;
	background-color: #FF0033;
	margin: 0px;
	padding: 4px;
	display: run-in;
}

div#errorInnerBox {
	padding: 4px;
	white-space: nowrap;
}

The problem is - the h5 element's width is wrapped to the 10% mark, whereas the rest of the 
div stretches out.

Any help how I can make it so that the h5 is 100% wide like it's supposed to be?

Cheers,

Mark

------------------------------------------------------------------
mark at safefrombees.com
ICQ: 3094740
Safe From Bees
[ www.safefrombees.com ]





More information about the thelist mailing list