SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Zealot maileen's Avatar
    Join Date
    Apr 2006
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question div into div with full area

    Hi,

    i have a DIV A which should contain a DIV B.
    for example DIV A has following dimensions (width = 100px; height = 200 px;background-color : #FF00FF
    how can i setup via CSS DIV B in order to use the whole area of DIV A and thus even if there is no text in DIV B (which could increase height and width of DIV B).

    thanks a lot,

    M.

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

    100% height on the wrapped div, but you usually don't set heights on content div's the content controls the height

    Increase in height Yes, Increase in width ?

    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;}
    	
    	.a,.b{min-height:200px;}
    	
    	.a{width:100px;background:#ffffcc;}
    	
    	.b{background:#ccffcc;}
    	
    	* html .a,* html .b{height:200px;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    
    <div class="a">
    
    <div class="b">
    <p>content 
    <!-- 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    end
    </p>
    </div>
    
    </div>
    
    </body>
    </html>

  3. #3
    SitePoint Zealot xiaawan's Avatar
    Join Date
    Sep 2007
    Location
    Islamabad, Pakistan
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    User this:


    Code CSS:
    .A
    {
    	background:#003366; height:200px;width:200px;
    }
    .B
    {
    	background:#FF0000; height:100%;width:100%;
    }

    Code HTML4Strict:
    <div class="A">
    	<div class="B"></div>
    </div>
    Zia Awan


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
  •