нижний колонтитул перекрывает два других divs

По какой-то причине мой нижний колонтитул держит перекрытие двух коробок с текстом, который находится в разных div над ним. Я пробовал все, что мог придумать, но так или иначе он перекрывает перекрытие при изменении размера окна. В полноэкранном режиме он работает. Скажите, пожалуйста, как это исправить. Я как бы потерялся ..нижний колонтитул перекрывает два других divs

PS: Я знаю, что этот вопрос, вероятно, спросил бесчисленное количество раз, но я действительно много пробовал, и я не могу понять, извинения.

CSS:

*, html, body, div, ul, ol, li, h1, h2, h3, h4, 
h5, h6, pre, form, label, fieldset, input, p, th, td { 
    margin: 0; 
    padding: 0; 
} 

p{ 
    font: Arial; 
    size: 12; 
} 


a { 
    color: #2069b4; 
} 

a:hover { 
    color: #2a2e36; 
} 

div#wholeBody { 
    padding: 1% 3.3%; 
    width: 80%; 
    height: 105%; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: eee; 
} 

div#mainContent { 
    border: 5px solid #ff6700; 
    padding: 1%; 
    width: 96%; 
    margin-left: auto; 
    margin-right: auto; 
} 

div#twoColumns { 
    padding: 1%; 
    margin-left: auto; 
    margin-right: auto; 
    display: block; 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

div#examplesLeft { 
    border: 5px solid #0078ff; 
    padding: 1.1%; 
    width: 44%; 
    left: 0.5%; 
    float: left; 
    z-index: 1; 
    margin: auto; 

} 

div#contactRight { 
    border: 5px solid #ff001a; 
    padding: 1.1%; 
    width: 44%; 
    right: 2.6%; 
    float: right; 
    z-index: 1; 
    margin: auto; 
} 

div#footer { 
    text-align: center; 
    width: auto; 
    position: relative; 
    z-index: 1; 
}

HTML:

<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 

     <!-- title and icon --> 
     <title>#</title> 
     <link rel="shortcut icon" href="#"> 

     <!-- Stylesheet --> 
     <link rel="stylesheet" href="style.css"> 


     <!-- Optimize for mobile devices --> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
    </head> 

    <body> 
     <div id="wholeBody"> 
      <div id="mainContent"> 
       <h1>Welcome!</h1><br /> 
       <p>testtesttesttesttesttesttesttesttesttestt esttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestt esttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestt esttesttesttesttesttesttesttesttesttesttesttesttest 
       </p> 
      </div> 
      <div id="twoColumns"> 
       <div id="contactRight"> 
        <p> 
         <b class="big">Contact details</b><br /><br /> 
         company <br /> 
         name <br /> 
         Adress: <br /> 
         Postal code: <br /> 
         City: <br /> 
         Country: <br /> 
         Email: <a href="mailto:"></a> <br /> 
         Phone: <a href="tel:"></a> <br /> 
         Skype: <br /> 
         Twitter: <a href="#">#</a> <br /> 
         Iban code: <br /> 
         Chamber of Commerce number: 
        </p> 
       </div> 

       <div id="examplesLeft"> 
        <p><b class="big">Examples</b> of published concepts</p> 
       </div> 
       <div style="clear:float;"></div> 
       <div id="footer"> 
        <p>&copy; Copyright 2013/2014 </p> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

источник

2014-09-24 Leafeeeh

Вы столкнулись с двумя столбами.

Необходимо очистить их.

изменение

<div style="clear:float;"></div>

<div style="clear:both;"></div>

Или, более классным образом использовать "clearfix":

Добавьте это в CSS

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
}

а class clearfix к вашему паре нт, например:

 <div id="twoColumns" class="clearfix"> 
      <div id="contactRight"> 
      </div> 

      <div id="examplesLeft"> 
      </div> 
     </div> 

     <div id="footer"> 
     </div>

источник

2014-09-24 19:46:57 nicolast

Спасибо! Это действительно помогло, однако, «классный» способ не работает для меня, он продолжает перекрываться. Разве это интерпретирует это иначе в файле css или что-то в этом роде? В любом случае, он может выглядеть менее стильно в коде, но он работает! – Leafeeeh

с помощью метода clearfix вы также должны изменить свою разметку (см. Мой ответ). Кстати, вы можете принять мой ответ: D – nicolast

Попробуйте добавить следующее правилу колонтитула.

дисплей: встроенный блок;

div#footer { 
    display: inline-block; 
    text-align: center; 
    width: auto; 
    position: relative; 
    z-index: 1; 
}

источник

2014-09-24 19:44:56 Rob

Попробуйте использовать стиль = "ясно: как" после того, как DIV с примерами Ид влево. Я думаю, что это решит вашу проблему.

источник

2014-09-24 19:46:38 lgreg

добавить clear: both; к элементу колонтитула.

Объяснение

clear:both; означает, что нет плавающих элементов не допускается на левой или с правой стороны, так что не позволяет другим дивы перекрывать его.

источник

2014-09-24 19:48:29 ran3000

Это поможет, если вы объясните, почему еще немного. Всегда помогает, когда случайные пользователи сталкиваются с вашим ответом;) –

Хорошо, вы правы. Это означает, что никакие плавающие элементы не разрешены ни на левой, ни на правой стороне, поэтому он не позволяет другим делителям перекрывать его. – ran3000

нижний колонтитул перекрывает два других divs

ответ

Смежные вопросы