...

View Full Version : help with setting Div Sizes



tizbo1423
12-14-2009, 05:11 PM
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.

Excavator
12-14-2009, 05:40 PM
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 -
<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 -

#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;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum