SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having a slight problem

    Greetings all! In IE, my div id="contentbottom" displays as it should, but in FF it doesn't expand all the way down. How do I do it so that, whichever block (because its 3 individual blocks grouped together) that is the longest will always cause any of the shorter blocks to "expand" the background down? Thanks!

    Here's the link: www.bui4ever.com

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

    wrap them , and give the wrapper the bgr color

  3. #3
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's what I figured. Doesn't work, or I'm doing it wrong. Here's what I have:

    <div id="content">
    <div id="contenttop">
    </div>
    <div id="contentbottom">
    </div>
    </div>

    and the CSS:

    #content {margin: 0; padding: 0; width: 600px; float: left; display: inline; }
    #contenttop {margin: 0; padding: 0; }
    #contentbottom {margin: 0; padding: 0; background-color: #d9cdbe; width: 600px; }
    #contentbottom .block {float: left; margin: 0; width: 33%; background-color: #d9cdbe; }
    #contentbottom .first, * html #contentbottom .first {clear: both; margin: 0px; }
    #contentbottom h2 {margin: 0; padding: 5px; font-size: 18px; }
    #contentbottom p {margin: 0; padding: 7px; font-size: 10px; }
    #contentbottom ul {margin: 2px 0 5px 10px; padding: 0; }
    #contentbottom ul li {list-style-type: none; }

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

    ?

    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" />
    	<style type="text/css">
    	* {padding:0;margin:0;}
    	
    	#content{margin:0;padding:0;width:600px;float:left;display:inline;background:#d9cdbe;}
    	
    	.l,.m,.r{float:left;width:200px;}
    	
    	.l p,.m p,.r p,.l h3,.m h3,.r h3{padding:5px;}
    	
    	</style>
    </head>
    <body>
    
    <div id="content">
    
    <div class="contenttop l">
    <h3>tools</h3>
    <p>left<br /><br /><br /><br /><br /><br />left</p>
    </div>
    
    <div class="contentbottom m">
    <h3>monthly</h3>
    <p>middle<br /><br /><br /><br /><br /><br /><br /><br /><br />middle</p>
    </div>
    
    <div class="contentbottom r">
    <h3>random</h3>
    <p>right<br /><br />right</p>
    </div>
    
    </div>
    
    </body>
    </html>

  5. #5
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hrmmm...that works in your example, but I can't seem to get it work correctly in my template. Here's the full code:

    Code:
    <div id="content">
        <div id="contenttop">
        </div>
        <div id="contentbottom">
          <div class="block first">
            <h2><img src="<?php bloginfo('stylesheet_directory'); ?>/img/design/icons/wrench.gif" alt="Tools of the Trade" /> Tools of the Trade</h2>
            <p>These are the tools that help power <a href="http://www.bui4ever.com" >Bui4Ever.com</a>. </p>
            <p class="center"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/home/macbook_pro.gif" alt="MacBook Pro" /><br />
            MacBook Pro 1.83 GHz/1.0GB RAM/80GB HDD</p>
            <p class="center"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/home/nikon_d100.gif" alt="MacBook Pro" /><br />
            Nikon D100/6MP</p>
          </div>
          <div class="block">
            <h2><img src="<?php bloginfo('stylesheet_directory'); ?>/img/design/icons/calendar.gif" alt="Calendar" /> Monthly Archives</h2>
            <ul>
              <?php wp_get_archives('type=monthly&show_post_count=true'); ?>
            </ul>
          </div>
          <div class="block">
            <h2>Random Gallery Pic</h2>
            <p><?php g2_sidebarimageblock(); ?></p>
          </div>
        </div><!-- contentbottom -->
      </div><!-- content -->
    So I can't exactly apply background: #d9cdbe; to content because content is the wrapper. Contenttop should be background-color: #E6DCCF; while contentbottom is background-color: #d9cdbe;. I might have my code overly complicated...but I couldn't think of any better way to accomplish this. I know the messy trick would be to give the contentbottom a height and would work, but I wanted to make it more dynamic by allowing it to adjust itself. Thanks for the help so far!

  6. #6
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still need help! 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
  •