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

[Tim Beadle]

On Thu, Apr 01, 2004 at 12:20:44PM +1000, Mark M wrote:
> <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?

Do you want it to be 100% of the errorBox div width, or 100% of the window 
width? Any chance of a mockup of what you're trying to achieve? It's a bit hard
(for me at least - no coffee yet :D) to visualise.

<tip author="Tim Beadle" type="Use Descendant Selectors in CSS">
Rather than applying div IDs all over the place, just use them on major 
sections, then use CSS descendant selectors to style the divs' descendants.

E.g.
<div id="errorBox">
<h5>Title</h5>
<p>Description</p>
</div>

#errorBox      { /* styles for div */ }
#errorBox h5   { /* styles for title */ }
#errorBox p    { /* styles for description */ }
</tip>

-- 
"Internet Explorer is like a box of chocolates. You never know what you're 
gonna get." -- Sjors