Skip to main content
revisão de informação
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

EDIT: Mudei um pouco o código devido ao comentário do autor da pergunta. Agora o Menu fica fixo a esquerda, e durando o scroll só as Sessões vão se mover a direita do Menu. Para fixar o Menu basta colocar o position:fixed assim ele não vai se mover durante o scroll. Já ppara afastar as Sessões e não deixa-las ficar por baixo do Menu basta adicionar nelas um margin-left: 250px;, onde 250px é equivalente a largura da coluna do Menu.

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>

* {
    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;
}

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;
}
<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>
</body>

EDIT: Mudei um pouco o código devido ao comentário do autor da pergunta. Agora o Menu fica fixo a esquerda, e durando o scroll só as Sessões vão se mover a direita do Menu. Para fixar o Menu basta colocar o position:fixed assim ele não vai se mover durante o scroll. Já ppara afastar as Sessões e não deixa-las ficar por baixo do Menu basta adicionar nelas um margin-left: 250px;, onde 250px é equivalente a largura da coluna do Menu.

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>
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Cara o principal problema é que vc simplesmente colocou o float no elemento errado, vc tem colocar o float no primeiro elemento, assim o segundo elemento "flutua" ao lado do primeiro entende.

O problema é que ando vc coloca float em um elemento ele muda de escopo, e perde seus valores de referência no fluxo de conteúdo da página, então eu tive que fazer uns ajustes no seu código.

Veja abaixo como ficou, repare que o float:left é na barra da esquerda.

* {
    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;
}

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;
}
<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>
</body>