Mauvaise position de div et et ne peut pas appliquer une marge supérieure à un h3 enveloppé dans le div

Question

J'ai un div umiejetnosc contient 2 div div web-development et inne. Les deux ont 2 divs qui les séparent. Je suis encore un problème avec la position du h3 dans les divs enfants.

J'essaye d'ajouter une marge aux entêtes h3, et le premier fonctionne mais pas le second. J'ai fait une capture d'écran avec les outils de développement de Google montrant que la marge est appliquée, mais la position de h3 est fausse. Est-ce problème avec display: block?

HTML

 <div id="umiejetnosci"> 
     <h2 class="tabStart">Umiejętności</h2> 

     <div id="web-development"> 
     <h3>Technologie Webowe</h3> 
      <div class = "nazwaUmiejetnosci">Html</div> 
      <div class = "gwiazdkiUmiejetnosci"><img src="image/skill.png"><img src="image/skill.png"><img src="image/skill.png"><img src="image/skill.png"><img src="image/noSkill.png"></div> 
      <div class = "nazwaUmiejetnosci">SS, SASS</div> 
      <div class = "gwiazdkiUmiejetnosci"><img src="image/skill.png"><img src="image/skill.png"><img src="image/skill.png"><img src="image/skill.png"><img src="image/noSkill.png"></div> 
      <div class = "nazwaUmiejetnosci">Bootstrap</div> 
      <div class = "gwiazdkiUmiejetnosci"><img src="image/skill.png"><img src="image/skill.png"><img src="image/skill.png"><img src="image/noSkill.png"><img src="image/noSkill.png"></div> 
      <div class = "nazwaUmiejetnosci">Javascript</div> 
      <div class = "gwiazdkiUmiejetnosci"><img src="image/skill.png"><img src="image/skill.png"><img src="image/skill.png"><img src="image/noSkill.png"><img src="image/noSkill.png"></div> 
      <div class = "nazwaUmiejetnosci">Jquery</div> 
      <div class = "gwiazdkiUmiejetnosci"><img src="image/skill.png"><img src="image/noSkill.png"><img src="image/noSkill.png"><img src="image/noSkill.png"><img src="image/noSkill.png"></div> 
      <div class = "nazwaUmiejetnosci">RWD</div> 
      <div class = "gwiazdkiUmiejetnosci"><img src="image/skill.png"><img src="image/skill.png"><img src="image/skill.png"><img src="image/noSkill.png"><img src="image/noSkill.png"></div> 
     </div> 

     <div id="inne"> 
      <h3>Inne</h3> 
      <div class = "nazwaUmiejetnosci">C#</div> 
      <div class = "gwiazdkiUmiejetnosci"><img src="image/skill.png"><img src="image/skill.png"><img src="image/skill.png"><img src="image/noSkill.png"><img src="image/noSkill.png"></div> 
      <div class = "nazwaUmiejetnosci">Photshop</div> 
      <div class = "gwiazdkiUmiejetnosci"><img src="image/skill.png"><img src="image/skill.png"><img src="image/skill.png"><img src="image/noSkill.png"><img src="image/noSkill.png"></div> 
      <div class = "nazwaUmiejetnosci">Unity 3D</div> 
      <div class = "gwiazdkiUmiejetnosci"><img src="image/skill.png"><img src="image/skill.png"><img src="image/skill.png"><img src="image/noSkill.png"><img src="image/noSkill.png"></div> 
      <div class = "nazwaUmiejetnosci">C++</div> 
      <div class = "gwiazdkiUmiejetnosci"><img src="image/skill.png"><img src="image/skill.png"><img src="image/noSkill.png"><img src="image/noSkill.png"><img src="image/noSkill.png"></div> 
     </div> 
    </div> 

CSS

#umiejetnosci{ 
width: 100%; 
background: #ffffff; 
overflow: auto; 
} 

#umiejetnosci h3{ 
margin: 25px 0 25px 25px; 
} 

#umiejetnosci img{ 
width: 30px; 
} 

#umiejetnosci #web-development{ 
width: 100%; 
} 

#umiejetnosci #inne{ 
width: 100%; 
} 


.nazwaUmiejetnosci{ 
width: 25%; 
text-align: right; 
font-size: 1.2em; 
padding: 10px 5% 0 0; 
float: left; 
display: inline-block; 
} 

.gwiazdkiUmiejetnosci{ 
width: 70%; 
float: left; 
display: inline-block; 
} 

Answer 1

Le problème est que vous faites flotter les éléments .nazwaUmiejetnosci et .gwiazdkiUmiejetnosci, ce qui les éloigne du flux.

Vous devez utiliser clearfix sur le conteneur parent, de sorte que tous les éléments situés en dessous nettoient les éléments flottants et prennent leur position prévue en dessous dans leur propre "espace".

#web-development:after, #inne:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

Vous pouvez également définir une classe clearfix dans votre CSS, et vous pouvez l'appliquer à tout récipient qui a des éléments flottants, par exemple <div id="web-development" class="clearfix">

.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

Et croyez-moi - si vous utilisez flotteurs, vous aurez besoin d'un beaucoup!

Référence pour plus d'informations: CSS Tricks - The Clearfix: Force an Element To Self-Clear its Children

Answer 2

Parce que vous utilisez le flotteur gauche, juste effacer le flotteur avant id = "inne", par exemple

...your code 
<div style="clear:both"></div> 
<div id="inne"> 
...your code 

Answer 3

Peut-être que vous pouvez essayer, pour commencer:

div{clear:both;} 

(c'est une meilleure solution que son Momo avec style - ne pas utiliser style, au meilleur).

Et pour l'appliquer seulement dans le conteneur que vous voulez:

section#myContainer div { clear: both; } 

et effacer les espaces class = "css" ->class="css". Vous pouvez les utiliser, mais les espaces sont des diables dans les programmes.