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

Mark M mark at safefrombees.com
Thu Apr 1 01:51:18 CST 2004


Ya must a' missed it in an earlier post:

http://users.tpg.com.au/adslkm7b/list/

> 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.

I want it to be 100% of the errorBox div width

(As stated in a previous post, I managed to do it with a repeating background image)

But feel free to have a look, and see if there is a better way.

Regards,

Mark

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


Quoting Tim Beadle <tsb at wigner.ioppublishing.com>:

> 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?
> 

> 
> <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
> -- 
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
> 
> For unsubscribe and other options, including the Tip Harvester 
> and archives of thelist go to: http://lists.evolt.org 
> Workers of the Web, evolt ! 
> 
> 
> 


More information about the thelist mailing list