How can I remove the space between these two DIVs?

Discussion in 'CSS' started by cancuncss, Nov 1, 2008.

0
  1. #1
    I'd like to decrease the space between the two DIVS that correspond to the two red dotted boxes on this page:

    URL: http://testingarea.proyectoclave.com/

    CSS (highlighted):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Miguel Angel &quot;El Bronco&quot; - Nuevo éxito &quot;Las Plebes Bravas&quot;</title>
    <style type="text/css">
    <!--
    body {
    font: 100% Arial, Verdana, Helvetica, sans-serif;
    font-size: small;
    background: #000000;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #d7cec0;
    }

    * {margin:0; padding:0;}

    .oneColFixCtrHdr #container {
    width: 960px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    background: #000000;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
    }
    .oneColFixCtrHdr #header {
    background: #DDDDDD;
    }
    .oneColFixCtrHdr #header h1 {
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    }

    .oneColFixCtrHdr #nav {
    height: 40px;
    background-color:#0d0f0d;
    }

    .oneColFixCtrHdr #maintop {
    background: #0d0f0d;
    height: 188px;
    border-bottom: 2px solid #51110f;
    font-size: 1.1em;
    }

    .oneColFixCtrHdr #maintop img {
    padding: 34px 0px 0px 110px;
    }

    .oneColFixCtrHdr #maintop p {
    padding: 0px 0px 0px 127px;
    margin: 5px;
    width: 376px;
    }

    .oneColFixCtrHdr #mainContent {
    background: #000000;
    position: relative;
    height: 425px;
    }

    .oneColFixCtrHdr img.headinglasplebes {
    left: 150px;
    top: 39px;
    position: absolute;
    z-index: 2;
    }

    .oneColFixCtrHdr img.headingestrellita {
    left: 203px;
    top: 258px;
    position: absolute;
    z-index: 2;
    }

    .oneColFixCtrHdr #videothumb1 {
    position:absolute;
    left: 80px;
    top: 30px;
    padding: 10px;
    border: thick dotted #C51200;
    width: 380px;
    }

    .oneColFixCtrHdr #videothumb1 p, #videothumb2 p{
    float:right;
    padding: 15px;
    }

    .oneColFixCtrHdr #videothumb1 img, #videothumb2 img{
    float:left;
    padding: 0px;
    border: thin solid #F1AD1A;
    }

    .oneColFixCtrHdr #videothumb2 {
    position:absolute;
    left: 80px;
    top: 250px;
    padding: 10px;
    border: thick dotted #C51200;
    width: 380px;
    }

    .oneColFixCtrHdr #mainContent p {
    width: 160px;
    }

    .oneColFixCtrHdr #footer {
    height: 88px;
    background-image: url(images/footerbackground.jpg);
    background-repeat: repeat-x;
    position: relative;
    margin-top: 37px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    }

    .oneColFixCtrHdr #footer img {
    position: absolute;
    left: 95px;
    z-index: 3;
    top: auto;
    bottom: 0px;
    }
    .oneColFixCtrHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    }
    -->
    </style>
    </head>

    <body class="oneColFixCtrHdr">

    <div id="container">

    <div id="header">
    <h1><img src="images/img_01.jpg" width="960" height="378" /></h1>
    <!-- end #header --></div>

    <div id="nav">
    <img src="images/buttonhome.jpg" width="85" height="40" /><img src="images/biobutton.jpg" width="99" height="40" /><img src="images/musbutton.jpg" width="80" height="40" /><img src="images/vidbutton.jpg" width="83" height="40" /><img src="images/fotosbutton.jpg" width="65" height="40" /><img src="images/contbutton.jpg" width="161" height="40" />
    <!-- end #nav --></div>

    <div id="maintop">
    <img src="images/llegaron.jpg" width="263" height="25" />
    <p> Ya está aquí el nuevo álbum de Miguel Angel “El Bronco“, el cual contiene el éxito de su propia autoría, “Las Plebes Bravas“. Este tema està inspirado en las mujeres valientes y decididas de Sinaloa y adornado con una combinación musical de sierreño y norteño.
    </p>
    <!-- end #maintop --></div>

    <div id="mainContent">
    <img class="headinglasplebes" src="images/img_22.jpg" width="124" height="15" />
    <img class="headingestrellita" src="images/img_29.jpg" width="70" height="16" />

    <div id="videothumb1">
    <p>El más reciente éxito de Miguel Angel dedicado a la mujer sinaloense, exaltando su carácter decidido.</p>
    <img src="images/img_26.jpg" width="182" height="112" />
    </div>

    <div id="videothumb2">
    <p>El consejo de un padre a la hija que sufre su primera decepción en el amor. </p>
    <img src="images/img_32.jpg" width="181" height="112" />
    </div>

    <!-- end #mainContent --></div>

    <div id="footer">
    <img src="images/img_36.jpg" width="548" height="117" />

    <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
    </html>
     
    cancuncss, Nov 1, 2008 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Reduce the value of "top" on the second box and its badge.

    cheers,

    gary
     
    kk5st, Nov 2, 2008 IP
  3. elias_sorensen

    elias_sorensen Well-Known Member

    Messages:
    852
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    110
    #3
    Simply use:
    
<div>
your 1st div
</div>
<br />
<div>
your 2nd div
</div>
    HTML:
    That should do it :)
     
    elias_sorensen, Nov 2, 2008 IP