1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How can I remove the space between these two DIVs?

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

  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 Active Member

    Messages:
    852
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    60
    #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