Box does not float left (float: left does not work)

Question

Box does not float left (float: left does not work)

Navigation

#1 by (1 votes)

1

Then, I'm starting to study html and css, I'm trying to make a page with a side menu with the homescreen next to it, but the homescreen box does not go up to the menu bar side, I do not know if the code is wrong, if anyone can help ... thank you, follow the html and css below:

* {
  margin: 0;
  padding: ;
  font-family: roboto;
}
.menu {
  background-color: #052e40;
  width: 200px;
  height: 100vh;
  text-align: right;
  vertical-align: middle;
  display: table-cell;
  line-height: 50px;
  padding-right: 50px;

}
a {
  text-decoration: none;
    color: #15b6ff;
}
li {
   list-style-type: none;
}
@font-face {
    font-family: 'roboto';
    src: url('roboto.ttf');
    font-weight: normal;
    font-style: normal;
}
.menu nav ul li a:hover {
  color: white;
}
hr {
  color: #15b6ff;
}
.home {
  background-color: red;
  width: 300px;
  height: 100vh;
  float: left;
}

<!DOCTYPE HTML>
<html lang="pt-br">
	<head>
		<meta charset="utf-8">
		<meta name="author" content="Nil">
		<meta name="description" content="Site Simples">
		<link rel="stylesheet" href="este.css">
	</head>
	<body id="corpo">
		<!--Barra lateral/Menu-->
		<section id="Barralat">
				<div class="menu">
					<nav>
						<ul>
							<li><a href="#">Pagina Inicial</a></li>
							<hr>
							<li><a href="#">Quem Somos Nós</a></li>
							<hr>
							<li><a href="#">Cursos</a></li>
							<hr>
							<li><a href="#">Pré-Matricula</a></li>
							<hr>
							<li><a href="#">Fale Conosco</a></li>
							<hr>
						</ul>
					</nav>
				</div>
			</section>
		</section>
		<!--Final da barra lateral/menu-->
		<!--pagina inicial-->
		<section class="home">
		Pagina Inicial
		</section>
	</body>
</html>

html css front-end

asked by anonymous 15.11.2018 / 02:48

1 answer

Embedded iframe from another site - 100% screen How to use keyboard library?

score 1 · Accepted Answer

The main problem is that you just put float in the wrong element, you have to put float on the first element, so the second element "floats" next to the first element.

The problem is that when I put float on an element it changes its scope, and loses its reference values in the content flow of the page, so I had to make some adjustments to its code.

See below how it was, notice that float:left is in the left bar.

EDIT: I changed the code a bit because of the comment of the question author. Now the Menu is fixed to the left, and for the duration of the scroll only the Sessions will move to the right of the Menu. To set the Menu just put position:fixed so it will not move during the scroll. Already to depart the Sessions and not let them be under the Menu just add a margin-left: 250px; , where 250px is equivalent to the width of the Menu column.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
    
* {
    margin: 0;
    padding: 0;
    font-family: roboto;
}

.menu {
    background-color: #052e40;
    width: 200px;
    height: 100vh;
    text-align: right;
    line-height: 50px;
    float: left;
    /* vertical-align: middle;
    display: table-cell; */
    display: flex;
    align-items: center;
    padding-left: 50px;
    position: fixed;
}

a {
    text-decoration: none;
    color: #15b6ff;
}

li {
    list-style-type: none;
}

@font-face {
    font-family: 'roboto';
    src: url('roboto.ttf');
    font-weight: normal;
    font-style: normal;
}

.menu nav ul li a:hover {
    color: white;
}

hr {
    color: #15b6ff;
}

.home {
    background-color: red;
    /* width: 300px; */
    height: 100vh;
    margin-left: 250px;
}
.home2 {
    background-color: green;
    /* width: 300px; */
    height: 100vh;
    margin-left: 250px;
}

<body id="corpo">
    <!--Barra lateral/Menu-->
    <section id="Barralat">
        <div class="menu">
            <nav>
                <ul>
                    <li><a href="#">Pagina Inicial</a></li>
                    <hr>
                    <li><a href="#">Quem Somos Nós</a></li>
                    <hr>
                    <li><a href="#">Cursos</a></li>
                    <hr>
                    <li><a href="#">Pré-Matricula</a></li>
                    <hr>
                    <li><a href="#">Fale Conosco</a></li>
                    <hr>
                </ul>
            </nav>
        </div>
    </section>
    <!--Final da barra lateral/menu-->
    <!--pagina inicial-->
    <section class="home">
        Pagina Inicial
    </section>
    <section class="home2">
        Pagina 2
    </section>
</body>