Div overlapping even after clear both

Asked

Viewed 160 times

0

This is the page:

http://magicforbaby.com.br/

There’s a banner you’re covering up div's below it. I already put a div clear both below it but it didn’t work.

as div's class="base" and class="final" are being superimposed

Some way out?

The page in question is code

<?php require_once "config.php" ; ?>
<!doctype html>
<html>
  <head>
    <title><?php echo $constantes->getTituloSite(); ?></title>
    <?php  require_once("_global/_meta/meta.ini"); ?>
    <link rel="shortcut icon" type="image/x-icon" href="_img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="_global/_css/estilo.css">
    <link rel="stylesheet" type="text/css" href="_global/_css/site.css">
    <link rel="stylesheet" type="text/css" href="_global/_css/menu.css">
    <link rel="stylesheet" type="text/css" href="_global/_css/jquery.cycle2.css">

    <script type="text/javascript" src="_global/_js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="_global/_js/jquery.cycle2.min.js"></script>
    <!--[if lt IE 9]>-->
      <script type="text/javascript" src="_global/_js/css3-mediaqueries.js"></script>
    <!--[endif]-->
  </head>

  <body>

      <div class="topo">
        <div class="sessoes">
          <div class="logo"><img src="_img/logo.png" /></div>
          <div class="menu"><?php require_once "_required/menu.php"; ?></div>    
        </div> 
      </div>

      <div class="conteudo">
        <div class="sessoes"><?php require_once "indexConteudo.php"; ?></div>
      </div> 

      <div class="base">
        <div class="sessoes"><?php require_once "_required/base.php"; ?></div>
      </div> 
      <div class="final">
        <div class="sessoes"><?php require_once "_required/final.php"; ?></div>
      </div> 

  </body>

</html>

In the indexConteudo.php for now only has the banner inside a div

<div class="banner">
  <?php require_once "_required/banner.php"; ?>
</div>

css

@charset "utf-8";
/* CSS Document */

.topo, .menu, .conteudo, .cont, .base, .final {
    clear:both;
    position:relative;
    width: 100%;
}

.logo, .menu {
    display:inline-block;
    vertical-align:top;
    height:150px;
}

.logo {
    width: 10%;
}

.menu {
    width: 89%;
}

.banner {   
    display: inline-block;
}

.listaCategorias {
    margin:0 auto;
    width: 100%;
    text-align:center;
}

.listaCategorias li {
    display:inline-block;
    vertical-align: top;
    height:300px;
}

.base {
    background-color: #FCB412;
    border-top: 5px #FC0000 solid;
    border-bottom: 5px #FC0000 solid;
    font-size: 12px;
}

.baseEsquerda {
    display: inline-block;
    vertical-align: top;
    width: 45%;
    padding: 3% auto;
    padding: 5px;
}

.barraBase {
    display: inline-block;
    vertical-align: top;
}

.barraBase .hr {
    display:block;  
    width: 6px;
    height:180px;
    background-color: #FC0000;
    border:none;
}
.baseDireita {
    display: inline-block;
    vertical-align: top;
    width: 45%;
    padding: 3% auto;
}

.final{
    background-color:#000;
    color: #FFF;
}

  .finalEsquerda, .finalDireita  {
      display:inline-block;
      vertical-align:middle;
  }

  .finalEsquerda  {
      text-align:left;
      width:700px;
  }

  .finalDireita  {
      text-align:right;
      width:290px;
  }
css css3

  • In case put the css, to see...

  • added at the end of the question

  • Whatever it is, which div is hidden?

  • the last two, the base and the final. can look at the structure I put here in the question. Notice under the banner a half yellowish div and another below her black appearing only the sides

  • what would be the desired location for them? they occupy all width.

  • below the banner

  • Let’s go continue this discussion in chat.

Show 2 more comments

1 answer

0

You can try fixing your Ivs at the base.

.final{
    background-color: #000;
    color: #FFF;
    bottom: 0;
}
.base {
    background-color: #FCB412;
    border-top: 5px #FC0000 solid;
    border-bottom: 5px #FC0000 solid;
    font-size: 12px;
    bottom: 34px;
}

  • ois is. However, as the div banner had no dimensions, the div’s base and final would rise and fall below the banner. Only solved when I put height in the banner div. Thanks for the support.

  • There are many ways to do... It depends on the structure of the layout... the coolest I saw there was pretty...

  • rsrsr, I’m learning. I’m terrible at visu. I’m more of a functional person. Webmaster type and not a designer! kkk

  • tmb I’m learning... but sometimes those who are out of trouble see what those who are inside do not see.... but this one I clean up alone, I only gave a moral support...kkk

  • You know, some here even say not to the detriment of standards. But who a good dialogue with whom I work alone in a small business helps and a lot! The guy is lost in the bid, needs and an orientation and here comes the norm and says: "No". Boring this. But maybe necessary!

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.