SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Apr 2012
    Location
    Cowra NSW Australia
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Gaps between divs that old chestnut...have tried many fixes w/out success

    Hi i am having problems with unwanted gaps between my divs I think they are mostly above .please note I am in the middle of building a site for a University project and have not included the complete code ..got stuck with my unwanted div gaps aaarggh..Any help would be super awesome.Here is my CSS:

    /* the following css for body essentially just defines the repeating background pattern as simepat.jpg located in my images folder*/
    body
    {background-image:url('images/simepat.jpg');
    padding:0;
    margin:0;}

    /*div wrapper is essentially just there to keep everything in the middle by auto aligning the left and right margins*/
    div.wrapper
    {width:1000px;
    margin-left:auto;
    margin-right:auto;
    padding:0;}

    /*This div is responsible for keeping the Sime portrait and the navigation bar to the left of the wrapper*/
    div.left
    {float:left;
    width:250px;
    padding:0;
    margin:0;
    border:0;}

    /* div.himg is a separate div created solely to hold the Sime Portrait and ensure it is at full opacity */
    div.himg
    {width:250px
    padding:0;
    margin:0;
    border:0;}

    /*The nav div below contains the div.navbox elements and sets the bg color and opacity for the left hand column which also adds structure to the site*/
    div.nav
    {width:250px;
    height:2000px;
    background-color:#a4a4a4;
    opacity:0.4;
    padding:0;
    margin:0;
    border:0;}



    /*The nav divs below are simply small compartments to contain each navigation option each div will contain one navigation element*/
    div.navbox
    {width:250px;
    height:50px;
    padding-left:10px;}



    and here is my html:
    <!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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <title>SidneySime-Home</title>
    <link type="text/css" rel="stylesheet" href="sime.css" />
    </head>
    <body>
    <div class="wrapper">
    <div class="left">
    <div class="himg">
    <p><img src="images/sime.jpg"></p>
    </div>
    <div class="nav">
    </div>
    </div>
    </div>
    </body>
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi Beefman. Welcome to the forums.

    Your code doesn't really give us much to go on in terms of div gaps. A common cause of this is that elements inside the divs have default margins on them that push containers apart (due to "collapsing margins"). Elements like <p>s have default top and bottom margins, for example.

    An easy (if lazy) way around this is to do a "CSS reset". For example, put this at the top of your style sheet:

    Code:
    html, body, div,
    h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img,
    form, fieldset, legend, label, textarea, 
    span, em, strong, sub, sup, cite,
    table, tbody, td, tfoot, th, thead, tr, tt,
    dl, dt, dd, ol, ul, li {
        margin: 0;
        padding: 0;
    }
    That will get rid of any default margin and padding.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •