I have 3 divs vertically stacked, the issue is that there is a gap between the top and center div. In addition, the image used as the background appears to be getting cut off at the bottom of the center div as the border bottom of the image has disappeared (this is a flat jpg, so its not a graphics issue). In addition to that, the height of this stack of divs (right column, the one mentioned above) and the left stack of divs (left column) are not the same height, although the divs and graphics are all the same heights :/ you can see what i mean at the homepage http://sunnahspace.com : I’ve searched for answers all over the web and its really overwhelming ive tried setting line-height to 0 for example, and it didn’t work, maybe I’m trying all these things wrong though, so don’t rule out anything. Heres some code:
<style type="text/css">
.body_titles {
padding: 20px;
font-family: GeosansLight;
font-size: 18px;
color: #FFF;
text-decoration: none;
width:600px;
}
.body_content {
padding: 20px;
font-family: GeosansLight;
font-size: 16px;
color: #333;
text-decoration: none;
overflow:hidden;
width:600px;
}
#column_left_container {
float:left;
width:640px;
height:946px;
}
#content_tab_top_left {
background-image:url(../img/container_top.jpg);
background-repeat:no-repeat;
height:335px;
width:640px;
}
#content_tab_center_left {
background-image:url(../img/container_center.jpg);
background-repeat:no-repeat;
height:311px;
width:640px;
}
#content_tab_bottom_left {
background-image:url(../img/container_btm.jpg);
background-repeat:no-repeat;
height:300px;
width:640px;
}
#column_right_container {
margin-left:20px;
float:right;
width:350px;
height:946px;
}
.body_titlesRIGHT {
padding: 20px;
font-family: GeosansLight;
font-size: 18px;
color: #FFF;
text-decoration: none;
width:350px;
}
.body_contentRIGHT {
padding: 20px;
font-family: GeosansLight;
font-size: 16px;
color: #333;
text-decoration: none;
overflow:hidden;
width:350px;
}
#content_tab_top_right {
background-image:url(../img/container_topright.jpg);
background-repeat:no-repeat;
height:335px;
width:350px;
margin-bottom:0px;
}
#content_tab_center_right {
background-image:url(../img/container_centerright.jpg);
background-repeat:no-repeat;
width:350px;
height:311px;
margin-top:0px;
}
#content_tab_bottom_right {
background-image:url(../img/container_btmright.jpg);
background-repeat:no-repeat;
width:350px;
height:300px;
}
</style>
<div id="column_left_container" style="display:inline-block">
<div id="content_tab_top_left">
<div class="body_titles">
Title
</div>
<div class="body_content">
Content
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Tests<br />
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
<br />
</div>
</div>
<div id="content_tab_center_left">
<div class="body_titles">
Title
</div>
<div class="body_content">
Content
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Tests<br />
Test<br />
Test<br />
Test<br />
</div>
</div>
<div id="content_tab_bottom_left">
<div class="body_titles">
Title
</div>
<div class="body_content">
Content
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Tests<br />
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
</div>
</div>
</div>
<div id="column_right_container" style="display:inline-block">
<div id="content_tab_top_right">
<div class="body_titlesRIGHT">
Title
</div>
<div class="body_contentRIGHT">
Content
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Tests<br />
Test<br />
Test
</div>
</div>
<div id="content_tab_center_right">
<div class="body_titlesRIGHT">
Title
</div>
<div class="body_contentRIGHT">
Content
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Tests<br />
Test<br />
Test<br />
Test<br />
<br />
<br />
</div>
<div id="content_tab_bottom_right">
<div class="body_titlesRIGHT">
Title
</div>
<div class="body_contentRIGHT">
Content
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Tests<br />
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
</div>
</div>
</div>
</div>
if you are looking for a quick fix, your #content_tab_top_right div should have a height of 333px. my guess is (without looking at the file in an editor) that you have 2 pixels of white space at the end of your background image