SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stopping divs from inheriting 100% width

    I have a layout which works fine using lots of classes and divs. Now that I've learned a bit about specificity I'm trying to minimise the amount of classes. Roughly speaking I have the following html for 1 part of the page (the extra divs are to hold left and right background images):

    <div id="topBanner">
    <div>
    <div id="search">
    <div>

    #topBanner div {} has width 100&#37;.

    I need #search div {} to have width unspecified so that it shrinks to the width of the div's contents.

    However, if I don't specify the width in #search div {}, or even in #topBanner #search div {}, the div uses the 100% width specified for #topBanner div {}. If I DO specify the width as auto this doesn't work either.

    Is there anyway I can get #search div {} to ignore the 100% width without using a class?
    Last edited by Rhysickle; Sep 20, 2007 at 08:31. Reason: more info

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Easiest solution would probably be to use a <span> for the search instead of a div as it's an inline element and will therefore only take up as much space as is required.

    Alternatively you could use a float on the search div which will cause the same to happen but then you'll need to probably use overflow: hidden; on the topBanner div to force it to contain it's children.

    Hope that helps?

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Something like this
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<!-- saved from url=(0022)http://www.domain.com/ -->
    	<style type="text/css">
    	*{padding:0;margin:0;}
    	
    	#topBanner{background:#ccffcc;}
    	
    	#search{
    	background:#ffffcc;
    	float:right;
    	}
    	/* 
    	.r{overflow:auto;background:#ccffff;}
    	* html .r{float:left;} * html .r p{height:1&#37;;} */
    	
    	p{padding:5px;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    
    <div id="topBanner"><p>banner</p></div>
    
    <div id="search"><p>search search search</p></div>
    
    <!-- the rest of your code 
    <div class="r"><p>the rest</p></div>
     -->
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll give thyese a go

    Thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •