Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help with setting Div Sizes

    i'm working on a website and want the heights of the of the divs to automatically adjust according to the content, instead of me going in and changing the div height in pixels. i've set the div heights to 100% but there is still a lot of white space at the bottom of them. How do I make them all size up nicely without any extra space at the bottom.

    here is the site:
    www.chrissybdesign.com/exporttradebrokers

    under any of the sub pages, such as Export Broker Services, there is a huge chunk of useless white space. I want that white space to end where the green bordered div ends.

    I have the divs set up like this:

    main container (the white space)
    >header (logo)
    >nav bar
    >main content (green bordered div)
    >>left sidebar (image)
    footer

    hopefully this makes sense, any help is appreciated.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello tizbo1423,
    Instead of using <br> and <p></p> for creating spaces, leave that stuff out of the markup and adjust your spaces with margin or padding. You'll have a lot more control over things that way.
    Try this -
    Code:
    <div class="contentRight style1">
            <p><span class="style2">The key</span> to becoming a successful exporter is simply a matter of finding a market niche, identifying where foreign buyers or representative need your products or 
              services and learning what public and private sources exist to help you succeed in the global market place. </p>
          </div>
          <div class="questions">
            <!--<div align="center">
              <p><br>-->
    <p>
                  <img src="images/questions.png" alt="Export Trade Brokers Customer Service" width="206" height="80"></p>
            <!--</div>-->
          </div>
          <!--<p>&nbsp;</p>
          <p>&nbsp;</p>-->
        </div>
        <div class="style6" id="feature1">
    And a few changes in your CSS, I think I highlighted them all in red -
    Code:
    #mainContainer #mainContent {
    	margin: auto;
    height: 260px;
    	width: 716px;
    	border: thin solid #009900;
    }
    #mainContainer #mainContent .imageBox {
    	height: 100%;
    	width: 110px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	font-weight: bold;
    	color: #333333;
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #006600;
    	clear: right;
    	float: left;
    }
    #mainContainer #mainContent .imageLink {
    	height: 200px;
    	width: 110px;
    	clear: none;
    	float: right;
    	border-top-width: thin;
    	border-right-width: thin;
    	border-bottom-width: thin;
    	border-left-width: thin;
    	border-right-style: solid;
    	border-right-color: #00CC99;
    }
    #mainContainer #mainContent .busMarketing {
    	height: 200px;
    	width: 110px;
    	clear: right;
    	float: left;
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #006600;
    }
    #mainContainer #mainContent .exportMarketing {
    	clear: right;
    	float: left;
    	height: 200px;
    	width: 110px;
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #006600;
    }
    #mainContainer #mainContent .contentRight {
    	clear: right;
    	float: left;
    height: 110px;
    	width: 230px;
    	padding: 15px;
    }
    .style1 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    .style2 {
    	font-family: georgia;
    	font-size: 18px;
    	font-style: italic;
    }
    #mainContainer #mainContent .questions {
    	width: 265px;
    	clear: right;
    	float: left;
    text-align: center;
    background: #f00;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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