开发者

space between two vertical divs

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 />
 开发者_如何学Python                           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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜