Float does not work properly

Asked

Viewed 64 times

1

Using good coding practices and cross browser code in the browsers:Google Chrome, Safari and Mozila I would like to know if I’m missing something because I have 2 columns of text and I want one of them to be floating next to the other

follows the code:

html,
body {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
ul li {
  list-style-type: none;
}
header {
  background-attachment: fixed;
  background-image: url(http://ten2.tw/assets/templates/ten2/images/about-kv.jpg);
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: -2;
}
header #bg-header {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.menu li {
  display: inline;
  font-family: Lucida Sans Unicode;
}
.menu {
  text-align: center;
}
.menu li a {
  margin: 10px;
  color: #fff;
}
.menu li a:hover {
  color: #1C8AE7;
}
#logo-header {
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  transform: scale(0.6);
  margin-top: 10%;
}
.text-center {
  text-align: center;
}
#texto-header {
  color: #fff;
  font-family: Lucida Sans Unicode;
  text-align: center;
  line-height: 10px;
  font-size: 1.1em;
  margin-top: -5%;
}
#btn-header {
  border: 2px solid #fff;
  border-radius: 5px;
  text-align: center;
  width: 220px;
  height: 50px;
  color: #fff;
  font-family: Lucida Sans Unicode;
  font-size: 1em;
  background: transparent;
  margin-top: 2%;
  cursor: pointer;
}
#btn-header:hover {
  background: #fff;
  color: #222;
}
#posicao-header {
  margin-top: -10%;
}
/*********************************************************************
				
							Corpo-1

**********************************************************************/

.corpo-1 {
  margin-top: 75%;
  text-align: center;
}
.corpo-1 h1 {
  color: #222;
  font-family: Lucida Sans Unicode;
  font-size: 2em;
  font-weight: bold;
}
.corpo-1 strong {
  color: #1C8AE7;
}
.corpo-1 h2 {
  color: #222;
  font-family: Lucida Sans Unicode;
  font-size: .9em;
  line-height: 20px;
  margin-top: -1%;
}
.barra-azul {
  background-color: #1C8AE7;
  width: 200px;
  height: 3px;
  border: none;
}
#marca-dagua {
  filter: alpha(opacity=50);
  opacity: 0.1;
  position: absolute;
  left: 0;
}
.icones-corpo-1 {
  -webkit-transform: scale(0.3);
  -ms-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
  float: left;
  margin-top: -60px;
}
.coluna-esquerda {
  text-align: left;
  float: left;
  width: 50%;
}
.coluna-esquerda h1 {
  font-size: 1.8em;
  font-weight: bold;
}
.coluna-esquerda p {
  font-family: Lucida Sans Unicode;
  font-size: .7em;
  line-height: 8px;
}
#linha-2 {
  margin-top: 5%;
}
.coluna-direita {
  text-align: left;
  margin-left: 45%;
  clear: both;
}
.coluna-direita h1 {
  font-size: 1.8em;
  font-weight: bold;
}
.coluna-direita p {
  font-family: Lucida Sans Unicode;
  font-size: .7em;
  line-height: 8px;
}
#linha-3 {
  margin-top: 5%;
}
<!DOCTYPE html>
<html>

<head>
  <title>Index</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <meta name="" charset="UTF-8">
</head>

<body>
  <header>
    <ul class="menu">
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Sobre</a>
      </li>
      <li><a href="#">Cases</a>
      </li>
      <li><a href="#">Serviços</a>
      </li>
      <li><a href="#">Orçamento</a>
      </li>
      <li><a href="#">Contato</a>
      </li>
    </ul>
    <div id="posicao-header">
      <img src="images/bg-header.png" id="bg-header">

      <p class="text-center">
        <img src="http://static.cdprojektred.com/common/agegate/cdp_witcher_gate_logo_en.png" id="logo-header">
      </p>

      <div id="texto-header">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>

      <p class="text-center">
        <a href="#">
          <input type="button" value="Como podemos ajudar?" id="btn-header">
        </a>
      </p>
    </div>
  </header>

  <section class="corpo-1">
    <h1>Lorem Ipsum <strong>Dolor</strong></h1>
    <h2>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
    <hr class="barra-azul">

    <p class="text-center">
      <img src="images/web-sky-corpo-1.png" id="marca-dagua">
    </p>
    <div class="coluna-esquerda">
      <div id="linha-1">
        <img src="images/lampada.png" class="icones-corpo-1">
        <h1>Identidade Visual</h1>
        <p>Sed ut perspiciatis unde architecto beatae vitae dicta sunt explicabo.</p>
        <p>Nemo enim ipsam voluptatem dolores eos qui ratione voluptatem nesciunt.</p>
        <p>Neque porro quisquam est, qui dolorem aliquam quaerat voluptatem.</p>
        <p>Sed ut perspiciatis unde architecto beatae vitae dicta sunt explicabo.</p>

      </div>

      <div id="linha-2">
        <img src="images/tag.png" class="icones-corpo-1">
        <h1>Designer Resposnsivo</h1>
        <p>Sed ut perspiciatis undearchitecto beatae vitae dicta sunt explicabo.</p>
        <p>Nemo enim ipsam dolores eos qui ratione voluptatem sequi nesciunt.</p>
        <p>Neque quisquam ut labore et dolore magnam aliquam quaerat voluptatem.</p>
        <p>Nemo enim ipsam dolores eos qui ratione voluptatem sequi nesciunt.</p>
      </div>
    </div>

    <div class="coluna-direita">
      <div id="linha-3">
        <img src="images/tablet.png" class="icones-corpo-1">
        <h1>Identidade Visual</h1>
        <p>Sed ut perspiciatis unde architecto beatae vitae dicta sunt explicabo.</p>
        <p>Nemo enim ipsam voluptatem dolores eos qui ratione voluptatem nesciunt.</p>
        <p>Neque porro quisquam est, qui dolorem aliquam quaerat voluptatem.</p>
        <p>Sed ut perspiciatis unde architecto beatae vitae dicta sunt explicabo.</p>

      </div>

      <div id="linha-4">
        <img src="images/monitor.png" class="icones-corpo-1">
        <h1>Designer Resposnsivo</h1>
        <p>Sed ut perspiciatis undearchitecto beatae vitae dicta sunt explicabo.</p>
        <p>Nemo enim ipsam dolores eos qui ratione voluptatem sequi nesciunt.</p>
        <p>Neque quisquam ut labore et dolore magnam aliquam quaerat voluptatem.</p>
        <p>Nemo enim ipsam dolores eos qui ratione voluptatem sequi nesciunt.</p>
      </div>
    </div>


    <p class="text-center">
      <button class="btn-corpo-1">Solicite um orçamento</button>
    </p>

  </section>

</body>

</html>

Note: The budget button must be aligned in the center with text-align:center

html5 css3

2 answers

1


Apply a clearfix solves the problem (caused by standard behavior of the float property):

.coluna-esquerda:before,
.coluna-direita:before {
    content:'';
    display: table
}

.coluna-esquerda::after,
.coluna-direita::after {
    clear:both
}

And the removal of the rule margin-left in .coluna-direita, which makes no sense since the element will be floated to the left. Your code would then look like this:

html,
body {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
ul li {
  list-style-type: none;
}
header {
  background-attachment: fixed;
  background-image: url(http://ten2.tw/assets/templates/ten2/images/about-kv.jpg);
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: -2;
}
header #bg-header {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.menu li {
  display: inline;
  font-family: Lucida Sans Unicode;
}
.menu {
  text-align: center;
}
.menu li a {
  margin: 10px;
  color: #fff;
}
.menu li a:hover {
  color: #1C8AE7;
}
#logo-header {
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  transform: scale(0.6);
  margin-top: 10%;
}
.text-center {
  text-align: center;
}
#texto-header {
  color: #fff;
  font-family: Lucida Sans Unicode;
  text-align: center;
  line-height: 10px;
  font-size: 1.1em;
  margin-top: -5%;
}
#btn-header {
  border: 2px solid #fff;
  border-radius: 5px;
  text-align: center;
  width: 220px;
  height: 50px;
  color: #fff;
  font-family: Lucida Sans Unicode;
  font-size: 1em;
  background: transparent;
  margin-top: 2%;
  cursor: pointer;
}
#btn-header:hover {
  background: #fff;
  color: #222;
}
#posicao-header {
  margin-top: -10%;
}
/*********************************************************************
				
							Corpo-1

**********************************************************************/

.corpo-1 {
  margin-top: 75%;
  text-align: center;
}
.corpo-1 h1 {
  color: #222;
  font-family: Lucida Sans Unicode;
  font-size: 2em;
  font-weight: bold;
}
.corpo-1 strong {
  color: #1C8AE7;
}
.corpo-1 h2 {
  color: #222;
  font-family: Lucida Sans Unicode;
  font-size: .9em;
  line-height: 20px;
  margin-top: -1%;
}
.barra-azul {
  background-color: #1C8AE7;
  width: 200px;
  height: 3px;
  border: none;
}
#marca-dagua {
  filter: alpha(opacity=50);
  opacity: 0.1;
  position: absolute;
  left: 0;
}
.icones-corpo-1 {
  -webkit-transform: scale(0.3);
  -ms-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
  float: left;
  margin-top: -60px;
}
.coluna-esquerda {
  background: red;
  text-align: left;
  float: left;
  width: 50%;
}
.coluna-esquerda h1 {
  font-size: 1.8em;
  font-weight: bold;
}
.coluna-esquerda p {
  font-family: Lucida Sans Unicode;
  font-size: .7em;
  line-height: 8px;
}
#linha-2 {
  margin-top: 5%;
}
.coluna-direita {
  background: blue;
  text-align: left;
  float: left;
}
.coluna-direita h1 {
  font-size: 1.8em;
  font-weight: bold;
}
.coluna-direita p {
  font-family: Lucida Sans Unicode;
  font-size: .7em;
  line-height: 8px;
}
#linha-3 {
  margin-top: 5%;
}
.coluna-esquerda:before,
.coluna-direita:before {
  content: '';
  display: table
}
.coluna-esquerda::after,
.coluna-direita::after {
  clear: both
}
<header>
  <ul class="menu">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Sobre</a>
    </li>
    <li><a href="#">Cases</a>
    </li>
    <li><a href="#">Serviços</a>
    </li>
    <li><a href="#">Orçamento</a>
    </li>
    <li><a href="#">Contato</a>
    </li>
  </ul>
  <div id="posicao-header">
    <img src="images/bg-header.png" id="bg-header">

    <p class="text-center">
      <img src="http://static.cdprojektred.com/common/agegate/cdp_witcher_gate_logo_en.png" id="logo-header">
    </p>

    <div id="texto-header">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <p class="text-center">
      <a href="#">
        <input type="button" value="Como podemos ajudar?" id="btn-header">
      </a>
    </p>
  </div>
</header>

<section class="corpo-1">
  <h1>Lorem Ipsum <strong>Dolor</strong></h1>
  <h2>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
  <hr class="barra-azul">

  <p class="text-center">
    <img src="images/web-sky-corpo-1.png" id="marca-dagua">
  </p>
  <div class="coluna-esquerda">
    <div id="linha-1">
      <img src="images/lampada.png" class="icones-corpo-1">
      <h1>Identidade Visual</h1>
      <p>Sed ut perspiciatis unde architecto beatae vitae dicta sunt explicabo.</p>
      <p>Nemo enim ipsam voluptatem dolores eos qui ratione voluptatem nesciunt.</p>
      <p>Neque porro quisquam est, qui dolorem aliquam quaerat voluptatem.</p>
      <p>Sed ut perspiciatis unde architecto beatae vitae dicta sunt explicabo.</p>

    </div>

    <div id="linha-2">
      <img src="images/tag.png" class="icones-corpo-1">
      <h1>Designer Resposnsivo</h1>
      <p>Sed ut perspiciatis undearchitecto beatae vitae dicta sunt explicabo.</p>
      <p>Nemo enim ipsam dolores eos qui ratione voluptatem sequi nesciunt.</p>
      <p>Neque quisquam ut labore et dolore magnam aliquam quaerat voluptatem.</p>
      <p>Nemo enim ipsam dolores eos qui ratione voluptatem sequi nesciunt.</p>
    </div>
  </div>

  <div class="coluna-direita">
    <div id="linha-3">
      <img src="images/tablet.png" class="icones-corpo-1">
      <h1>Identidade Visual</h1>
      <p>Sed ut perspiciatis unde architecto beatae vitae dicta sunt explicabo.</p>
      <p>Nemo enim ipsam voluptatem dolores eos qui ratione voluptatem nesciunt.</p>
      <p>Neque porro quisquam est, qui dolorem aliquam quaerat voluptatem.</p>
      <p>Sed ut perspiciatis unde architecto beatae vitae dicta sunt explicabo.</p>

    </div>

    <div id="linha-4">
      <img src="images/monitor.png" class="icones-corpo-1">
      <h1>Designer Resposnsivo</h1>
      <p>Sed ut perspiciatis undearchitecto beatae vitae dicta sunt explicabo.</p>
      <p>Nemo enim ipsam dolores eos qui ratione voluptatem sequi nesciunt.</p>
      <p>Neque quisquam ut labore et dolore magnam aliquam quaerat voluptatem.</p>
      <p>Nemo enim ipsam dolores eos qui ratione voluptatem sequi nesciunt.</p>
    </div>
  </div>


  <p class="text-center">
    <button class="btn-corpo-1">Solicite um orçamento</button>
  </p>

</section>

There are better (and practical) solutions nowadays to deal with the "floating layout". I will not answer here for has nothing to do with the problem of your case, but depending on the version of the browsers you want to support a simple display: inline-block can facilitate. Or smaller still, opt for the use of flexbox. TODO: Give a "Googled". :)

  • thanks @Renan helped me a little =3

0

  1. place the attribute float: left in the left colouna and float: right in the right column

  2. withdraw the margin-left: 45%; right-hand column

Browser other questions tagged html5 css3

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