Div in the center next to each other

Asked

Viewed 59 times

0

I’m creating a website, created some Ivs and wanted them to be next to each other centralized, I tried with float but it is below.

CSS:

.fundopython{
    background:#232323;
    width:200px;
    height:250px;
    padding:5px;
    background-image:url(https://pplware.sapo.pt/wp-content/uploads/2018/10/python2-720x405.jpg);
    background-position:center;
    background-size:cover;
}

.fundocurso{
    background:#232323;
    width:200px;
    height:250px;
    padding:5px;
    background-image:url(https://pplware.sapo.pt/wp-content/uploads/2018/10/python2-720x405.jpg);
    background-position:center;
    background-size:cover;
}

.frente{
    opacity:0;
    width:100%;
    height:100%;
    background:#C0C0C0;
    color:#fff;
    transition: all .2s;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    transform: scale(0.9);
    font-family:verdana;

}

.frente:hover{
    opacity:1;
    transform: scale(1);
}

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Bu - Cursos</title>
        <link rel="stylesheet" href="css/style.css">
        <meta charset="utf-8">
        <link rel="stylesheet" href="text.css">
        <link rel="stylesheet" href="css/estilo2.css">
    </head>
    <body>
        <ul class="nav">
            <li id="settings">
                <a href="https://github.com/bu"><img src="icons/github.png" /></a>
            </li>
            <li>
                <a href="servicos.html">Serviços</a>
            </li>
            <li>
                <a href="ferramentas.html">Ferramentas</a>
            </li>
            <li class="options borda-direita">
                <a href="#">Cursos</a>
                <ul class="subnav">
                    <li><a href="certificados.html">Premium</a></li>
                    <li><a href="gratuitos.html">Gratuitos</a></li>
                </ul>
            </li>

            <li id="search">
                <form action="" method="get">
                    <input type="text" name="search_text" id="search_text" placeholder="Search"/>
                    <input type="button" name="search_button" id="search_button"></a>
                </form>
            </li>
            <li class="options">
                <a href="#">Tutoriais</a>
                <ul class="subnav">
                    <li><a href="hacking.html">Hacking</a></li>
                    <li><a href="programacao.html">Programação</a></li>
                    <li><a href="pentest.html">PenTest</a></li>
                    <li><a href="outros.html">Outros</a></li>
                </ul>
            </li>
            <li>
                <a href="contato.html">Contato</a>
            <li>
                <a href="sobre.html">Sobre</a>
            </li>
        </ul> 
        <script src="prefixfree-1.0.7.js" type="text/javascript"></script>
        <br>
        <p class="line anim-typewriter">Certificados</p>
        <br>
        <div class="fundopython">
            <div class="frente">
                <h2>Python</h2>
                <br>
                <br>
                <p>
                    Curso Completo<br>da Linguagem<br>Python 3.7 
                </p>
            </div>

            <div class="fundocurso">
                <div class="frente">
                    <h2>Python</h2>
                    <br>
                    <br>
                    <p>
                        Curso Completo<br>da Linguagem<br>Python 3.7 
                    </p>
                </div>
            </div>
        </div>
    </body>
</html>
html css

4 answers

1

Face basically yours divs are locked in the wrong way, got inside each other, so the float did not work. The div fundocurso had stayed inside the div fundopython there was no possible one to stand beside the other since one was inside the other...

And though I don’t indicate float, follow your corrected code using float and with the div closed correctly. And to center I point to place the two divs within a container and in that container you use margin: auto and width: max-content.

    .fundopython {
    background: #232323;
    width: 200px;
    height: 250px;
    padding: 5px;
    background-image: url(https://pplware.sapo.pt/wp-content/uploads/2018/10/python2-720x405.jpg);
    background-position: center;
    background-size: cover;
    float: left;
}

.fundocurso {
    background: #232323;
    width: 200px;
    height: 250px;
    padding: 5px;
    background-image: url(https://pplware.sapo.pt/wp-content/uploads/2018/10/python2-720x405.jpg);
    background-position: center;
    background-size: cover;
    float: left;
}

.frente {
    opacity: 0;
    width: 100%;
    height: 100%;
    background: #C0C0C0;
    color: #fff;
    transition: all .2s;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transform: scale(0.9);
    font-family: verdana;

}

.frente:hover {
    opacity: 1;
    transform: scale(1);
}

.container {
    margin: auto;
    width: max-content;
}
<ul class="nav">
    <li id="settings">
        <a href="https://github.com/bu"><img src="icons/github.png" /></a>
    </li>
    <li>
        <a href="servicos.html">Serviços</a>
    </li>
    <li>
        <a href="ferramentas.html">Ferramentas</a>
    </li>
    <li class="options borda-direita">
        <a href="#">Cursos</a>
        <ul class="subnav">
            <li><a href="certificados.html">Premium</a></li>
            <li><a href="gratuitos.html">Gratuitos</a></li>
        </ul>
    </li>
    <li id="search">
        <form action="" method="get">
            <input type="text" name="search_text" id="search_text" placeholder="Search" />
            <input type="button" name="search_button" id="search_button"></a>
        </form>
    </li>
    <li class="options">
        <a href="#">Tutoriais</a>
        <ul class="subnav">
            <li><a href="hacking.html">Hacking</a></li>
            <li><a href="programacao.html">Programação</a></li>
            <li><a href="pentest.html">PenTest</a></li>
            <li><a href="outros.html">Outros</a></li>
        </ul>
    </li>
    <li>
        <a href="contato.html">Contato</a>
    </li>
    <li>
        <a href="sobre.html">Sobre</a>
    </li>
</ul>
<script src="prefixfree-1.0.7.js" type="text/javascript"></script>
<br>
<p class="line anim-typewriter">Certificados</p>
<br>
<div class="container">
    <div class="fundopython">
        <div class="frente">
            <h2>Python</h2>
            <br>
            <br>
            <p>
                Curso Completo<br>da Linguagem<br>Python 3.7
            </p>
        </div>

    </div>
    <div class="fundocurso">
        <div class="frente">
            <h2>Python</h2>
            <br>
            <br>
            <p>
                Curso Completo<br>da Linguagem<br>Python 3.7
            </p>
        </div>
    </div>
</div>

0

The float It works as a floating point for something, use the float in your main block, so it will cause your two Ivs to float on it, and also use the float in both Ivs so that they both catch the float.... Also use clearfix() to remove possible bugs on the floating site....

Here’s how to create clear fix

https://www.w3schools.com/howto/howto_css_clearfix.asp

0

Besides the lack of Divs closure, it is not recommended to use <br> for spacing between elements. The tag <br> should be used only for line breaking between type elements phrasing content. Instead of that, use margin.

Regarding Divs alignment, you can include the two Divs in a parent flexbox div. In addition to one sitting next to the other automatically, you can also center them with the property justify-content: center;.

Behold:

.fundopython{
background:#232323;
width:200px;
height:250px;
padding:5px;
background-image:url(https://pplware.sapo.pt/wp-content/uploads/2018/10/python2-720x405.jpg);
background-position:center;
background-size:cover;
}

.fundocurso{
background:#232323;
width:200px;
height:250px;
padding:5px;
background-image:url(https://pplware.sapo.pt/wp-content/uploads/2018/10/python2-720x405.jpg);
background-position:center;
background-size:cover;
}

.frente{
  opacity:0;
  width:100%;
  height:100%;
  background:#C0C0C0;
  color:#fff;
  transition: all .2s;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  transform: scale(0.9);
  font-family:verdana;

}

.frente:hover{
  opacity:1;
  transform: scale(1);
}

.flexbox{
   display: flex;
   justify-content: center;
}
<div class="flexbox">
   <div class="fundopython">
      <div class="frente">
         <h2>Python</h2>
         <br>
         <br>
         <p>
            Curso Completo<br>da Linguagem<br>Python 3.7 
         </p>
      </div>
   </div>
   <div class="fundocurso">
      <div class="frente">
         <h2>Python</h2>
         <br>
         <br>
         <p>
            Curso Completo<br>da Linguagem<br>Python 3.7 
         </p>
      </div>
   </div>
</div>

0

You were already using the flexbox, more incorrectly, because you were applying in the items and not in a container (div) behind them.

Follow an example using the flexbox:

.certificados {
	display: flex;
	justify-content:center;
}

.fundopython{
	background: #232323;
	width: 200px;
	height: 250px;
	padding: 5px;
	background-image: url(https://pplware.sapo.pt/wp-content/uploads/2018/10/python2-720x405.jpg);
	background-position: center;
	background-size: cover;
	margin: 5px;
}

.frente{
	opacity: 0;
	width: 100%;
	height: 100%;
	background: #C0C0C0;
	color: #fff;
	transition: all .2s;
	
	transform: scale(0.9);
	font-family:verdana;
}
<ul class="nav">
   <li id="settings">
      <a href="https://github.com/bu"><img src="icons/github.png" /></a>
   </li>
   <li>
      <a href="servicos.html">Serviços</a>
   </li>
   <li>
      <a href="ferramentas.html">Ferramentas</a>
   </li>
   <li class="options borda-direita">
      <a href="#">Cursos</a>
      <ul class="subnav">
         <li><a href="certificados.html">Premium</a></li>
         <li><a href="gratuitos.html">Gratuitos</a></li>
      </ul>
   </li>
   </li>
   <li id="search">
      <form action="" method="get">
         <input type="text" name="search_text" id="search_text" placeholder="Search"/>
         <input type="button" name="search_button" id="search_button"></a>
      </form>
   </li>
   <li class="options">
      <a href="#">Tutoriais</a>
      <ul class="subnav">
         <li><a href="hacking.html">Hacking</a></li>
         <li><a href="programacao.html">Programação</a></li>
         <li><a href="pentest.html">PenTest</a></li>
         <li><a href="outros.html">Outros</a></li>
      </ul>
   </li>
   <li>
      <a href="contato.html">Contato</a>
   <li>
      <a href="sobre.html">Sobre</a>
   </li>
</ul>
<br>
<p class="line anim-typewriter">Certificados</p>
<br>
<div class="certificados">
  <div class="fundopython">
	  <div class="frente">
		 <h2>Python</h2>
		 <br>
		 <br>
		 <p>
			Curso Completo<br>da Linguagem<br>Python 3.7 
		 </p>
	  </div>
  </div>
  <div class="fundopython">
	  <div class="frente">
		 <h2>Python</h2>
		 <br>
		 <br>
		 <p>
			Curso Completo<br>da Linguagem<br>Python 3.7 
		 </p>
	  </div>
  </div>
</div>

Browser other questions tagged html css

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