Div overlapping even after clear Both

Question

Div overlapping even after clear Both

Navigation

#1 by (0 votes)

0

The page is this:

link

You have a banner that is covering div's below it. I already put div clear both below it but it did not work.

div's class="base" and class="final" are being overridden

Any output?

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>

No indexConteudo.php so far 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

asked by anonymous 16.06.2016 / 22:02

1 answer

font-face url does not load Control point staff card

score 0 · Answer 1

You can try setting your divs to 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;
}