CODEWITHSUNDEEP
htmlcss
user7553052
user7553052

Reputation:

Clear the float in CSS

I have this code and I'm trying to clear the float using 2 methods: overflow and clear, but it don't work as supposed to.

body {
  border: 1px solid;
  padding: 0 auto;
}

header {
  height: 25%;
  border-bottom: 1px solid;
}

header #logo {
  float: left;
  text-align: center;
  width: 25%;
}

header #titre {
  background: black;
  color: white;
  float: right;
  text-align: center;
  width: 75%;
}

#xd {}

nav {
  width: 25%;
  text-align: center;
  float: left;
}

section {
  border-left: 1px solid;
  width: 75%;
  float: right;
  text-align: center;
}

.clr {
  clear: both;
}
<!DOCTYPE html>
<html>

<body>
  <header>
    <div id="titre">
      <h1>sécurité des réseaux</h1>
    </div>
    <div id="logo">
      <h1>logo</h1>
    </div>
    <br class="clr" />

  </header>
  <div id="xd">
    <nav>
      <h1><a href="#">#</a></h1>
      <h1><a href="#">#</a></h1>
      <h1><a href="#">#</a></h1>
      <h1><a href="#">#</a></h1>
      <h1><a href="#">#</a></h1>

    </nav>
    <section>
      <h1>Firewall (pare-feu)</h1>
      <p>
        Chaque ordinateur connecté à internet (et d'une manière plus générale à n'importe quel réseau informatique) est susceptible d'être victime d'une attaque d'un pirate informatique. La méthodologie généralement employée par le pirate informatique consiste
        à scruter le réseau (en envoyant des paquets de données de manière aléatoire) à la recherche d'une machine connectée, puis à chercher une faille de sécurité afin de l'exploiter et d'accéder aux données s'y trouvant.
      </p>
      <p>Cette menace est d'autant plus grande que la machine est connectée en permanence à internet pour plusieurs raisons :
      </p>
      <ul>
        <li>La machine cible est susceptible d'être connectée sans pour autant être surveillée ;</li>
        <li>La machine cible est généralement connectée avec une plus large bande passante ;
        </li>
        <li>La machine cible ne change pas (ou peu) d'adresse IP.
        </li>

      </ul>

    </section>
    <br class="clr" />

  </div>

</body>

</html>

I don't understand why the text are not at the line with the first element in nav.

And also the border it's not complete. Why this is happening and how to fix it?

Upvotes: 4

Views: 1292

Answers (4)

zerocool
zerocool

Reputation: 3522

your problem is you have 100% + 1px there is several method to solve that one is trick of box module 

section{box-sizing: border-box;}

other is to calculate your size before put it that also work very will

Upvotes: 0

Marc Carn&#233; Bori
Marc Carn&#233; Bori

Reputation: 66

In you code, you are assigning 25% width to nav and 75% width to section. But Section has a 1px border so in the end it's exceeding the 75% assigned. Hence, the whole section is placed under nav.

In your same code, removing the 1px border or making the section width 74% will work as you expect, because there is enough space for that extra pixel.

By the way, I don't think that clearing the float is what you are looking for.

body {
  border: 1px solid;
  padding: 0 auto;
}

header {
  height: 25%;
  border-bottom: 1px solid;
}

header #logo {
  float: left;
  text-align: center;
  width: 25%;
}

header #titre {
  background: black;
  color: white;
  float: right;
  text-align: center;
  width: 75%;
}

#xd {}

nav {
  width: 25%;
  text-align: center;
  float: left;
}

section {
  
  width: 75%;
  float: right;
  text-align: center;
}

.clr {
  clear: both;
}
<!DOCTYPE html>
<html>

<body>
  <header>
    <div id="titre">
      <h1>sécurité des réseaux</h1>
    </div>
    <div id="logo">
      <h1>logo</h1>
    </div>
    <br class="clr" />

  </header>
  <div id="xd">
    <nav>
      <h1><a href="#">#</a></h1>
      <h1><a href="#">#</a></h1>
      <h1><a href="#">#</a></h1>
      <h1><a href="#">#</a></h1>
      <h1><a href="#">#</a></h1>

    </nav>
    <section>
      <h1>Firewall (pare-feu)</h1>
      <p>
        Chaque ordinateur connecté à internet (et d'une manière plus générale à n'importe quel réseau informatique) est susceptible d'être victime d'une attaque d'un pirate informatique. La méthodologie généralement employée par le pirate informatique consiste
        à scruter le réseau (en envoyant des paquets de données de manière aléatoire) à la recherche d'une machine connectée, puis à chercher une faille de sécurité afin de l'exploiter et d'accéder aux données s'y trouvant.
      </p>
      <p>Cette menace est d'autant plus grande que la machine est connectée en permanence à internet pour plusieurs raisons :
      </p>
      <ul>
        <li>La machine cible est susceptible d'être connectée sans pour autant être surveillée ;</li>
        <li>La machine cible est généralement connectée avec une plus large bande passante ;
        </li>
        <li>La machine cible ne change pas (ou peu) d'adresse IP.
        </li>

      </ul>

    </section>
    <br class="clr" />

  </div>

</body>

</html>

What Jagdish Parmar propopses is also correct, as it includes the width of the border inside the total width of the box:

section{box-sizing: border-box;}

Upvotes: 3

grinmax
grinmax

Reputation: 1855

Try this, you have 100% + 1px

section {
  border-left: 1px solid;
  width: calc(75% - 1px); // Changed this line
  float: right;
  text-align: center;
}

Live JsFiddle - https://jsfiddle.net/grinmax_/4qq133mu/

Upvotes: 3

Jagdish Parmar
Jagdish Parmar

Reputation: 599

See fiddle

Add CSS on this tag

section{box-sizing: border-box;}

Upvotes: 3

Related Questions