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

Asked

Viewed 62 times

1

so guys, 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 doesn’t go up to the side of the menu bar, I don’t 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

1 answer

1


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

The problem is I walk you pose float in an element it changes scope, and loses its reference values in the content stream of the page, so I had to make some adjustments to its code.

See below how it turned out, notice that the float:left is on the left bar.

EDIT: I changed the code a little bit due to the comment of the author of the question. Now the Menu is fixed to the left, and lasting the scroll only the Sessions will move to the right of the Menu. To fix the Menu just put the position:fixed so it won’t move during the scroll. Already ppara move the Sessions away and don’t let them get 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>

  • Speak brother, your tip worked, the layout was, in appearance, the way I want, but then when I went to format a text in "home", I noticed that the home was actually occupying 100% of the screen behind the menu, I wanted it to be on the right side of the menu, because the menu will be fixed and the scrolling of the sessoes will be done occupying only the rest of the screen next to the menu. tried to put the width of the menu in percentage but defaults all.

  • if you know a way to solve I will be grateful...

  • @Eleniltonsilva Read the EDIT which I did in the reply and execute the code on full page. I think now it became clearer what you wanted, I left the details of how to fix the menu and how to take off the menu at the bottom of the EDIT response.

  • helped a lot, solved, thank you.

  • @Eleniltonsilva if you solve the problem and you think the question has been answered consider mark it as OK! So it is not open on the site as Unresolved Question. Good luck ai tmj

Browser other questions tagged html css front-end

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