I have a problem with the design of a test website that I am doing. The problem is that I apply the property to two containers (an aside and a section) float: left;
but they are located one below the other. Here the image and the css of each one:
CSS:
@charset "UTF-8";
*{margin:0; padding:0}
@media (orientation: landscape)
{
#alien1
{
background-color: #ff0000;
color: #00ff00;
}
#alien2
{
background-color: #00ff00;
color: #ff0000;
}
#alien3
{
background-color: #0000ff;
color: #ff8000;
}
#alien4
{
background-color: #ffff00;
color: #c471cd;
}
.alien
{
padding: 1vh 1vw;
margin: 1vh 1vw;
display: inline-block;
}
#barranav
{
background-color: #ff00ff;
width: 39vw;
font-size: 1vw;
display: inline-block;
}
#barralateral
{
background-color: #d08030;
float: left;
height: 100.5vh;
width: 15vw;
overflow: auto;
}
#infoprincipal
{
background-color: #9900ff;
height: 100.5vh;
width: 82.8vw;
float: left;
}
#piedepagina
{
background-color: #00f12f;
height: 100%;
width: 98.5vw;
float: left;
margin-top: 10px;
margin-bottom: 10px;
}
#imagengameplay
{
padding-left: 20px;
width: 80vw;
height: 80vh;
display: inline;
}
#titulo-infoprincipal
{
padding-left: 20px;
padding-top: 20px;
}
#saludo
{
padding-left: 20px;
padding-bottom: 1vh;
font-size: 2vw;
display: inline;
}
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="pagina de prueba"/>
<meta name="keywords" content="html5, css3, JavaScript, diseño web"/>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<title>Pagina de prueba</title>
<link rel="stylesheet" href="styles1.css"/>
</head>
<body>
<header>
<h1><mark><em>Hola que hace</em></mark></h1>
</header>
<nav id="barranav">
<a href="web2.html" id="alien1" class="alien"><cite><strong>Alienigenas1</strong></cite></a>
<a href="web3.html" id="alien2" class="alien"><cite><strong>Alienigenas2</strong></cite></a>
<a href="web4.html" id="alien3" class="alien"><cite><strong>Alienigenas3</strong></cite></a>
<a href="index2.html" id="alien4" class="alien"><cite><strong>Alienigenas4</strong></cite></a>
</nav>
<aside id="barralateral">
<p class="elemento">Primer elemento</p>
<p class="elemento">Segundo elemento</p>
<p class="elemento">Tercer elemento</p>
<p class="elemento">Primer elemento</p>
<p class="elemento">Segundo elemento</p>
<p class="elemento">Tercer elemento</p>
<p class="elemento">Primer elemento</p>
<p class="elemento">Segundo elemento</p>
<p class="elemento">Tercer elemento</p>
<p class="elemento">Primer elemento</p>
<p class="elemento">Segundo elemento</p>
<p class="elemento">Tercer elemento</p>
<p class="elemento">Primer elemento</p>
<p class="elemento">Segundo elemento</p>
<p class="elemento">Tercer elemento</p>
<p class="elemento">Primer elemento</p>
<p class="elemento">Segundo elemento</p>
<p class="elemento">Tercer elemento</p>
<p class="elemento">Primer elemento</p>
<p class="elemento">Segundo elemento</p>
<p class="elemento">Tercer elemento</p>
</aside>
<section id="infoprincipal">
<h2 id="titulo-infoprincipal">Gameplay</h2>
<img id="imagengameplay" src="https://i2.wp.com/culturageek.com.ar/wp-content/uploads/2018/11/Culturageek.com_.ar-Battlefield-5.jpg?fit=1200%2C800">
<br>
<p id="saludo">Hey muy buenas a todos aqui estamos en un nuevo gameplay</p>
</section>
<footer id="piedepagina">
<time class="infolegal" datetime="2019/02/04" pubdate>Publicado el día 2019/02/04</time>
<small class="infolegal">Contacto: [email protected]</small>
<small class="infolegal"><strong>Derechos reservados por narnia</strong></small>
</footer>
</body>
</html>
margin
This can cause y valuespadding
that browsers defaultsetearlos
to 0 (closest solution) , before adding the corresponding styles.This is achieved with the wildcard
*
(asterisk) to select all elements of theDOM
Another simpler option would be to use
flexbox
to create the two columns. To handle the width I would only modify the widthmax-width
of the left container.@ElAlien123, the behavior you get is normal when using float, as it is intended for block text to flow around images. Avoid using it for other purposes than that.
You have 3 methods to create columns more effectively than using float:
Table replica:
Inline Block
flex box