Tenho a seguinte estrutura, por enquanto:
O menu lateral veio por
include_once 'menu.php'
e a pagina que estamos vendo é a home.php
.
CSS do menu:
.longBarVertical {
width: 180px;
min-height: 100%;
background-color: transparent;
border: 1px solid blue;
float: left;
}
.logoMenu {
margin-top: 15px;
}
.logoMenu img {
width: 50px;
}
.menuVertical {
position: relative;
width: 180px;
padding: 0px;
list-style: none;
overflow: hidden;
margin-top: 15px;
}
.menuVertical li a {
padding-left: 15px;
line-height: 45px;
display: block;
overflow: hidden;
position: relative;
text-decoration: none;
color: rgb(225, 225, 225);
border-left: 5px solid transparent;
}
.menuVertical li:hover a, .menuVertical li:hover a i {
color: black;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
transition: all 0.15s linear;
}
Até ai talvez esteja tudo certo, o que eu gostaria era de conseguir colocar a div
em vermelho que está escrito "Home" ao lado do menu lateral e poder colocar widht: 100%
. Do jeito que está no print, está com width: 200px
(apenas para exemplo) e se eu colocar width: 100%
, a div
fica embaixo do menu lateral, o que não é o desejado.
Códigos da div
em vermelho, também pode ser chamada de "conteudo":
<div style="background-color: red; width: 200px; float: left;">
<h1>Home</h1>
</div>
Talvez não seja possivel colocar width: 100%
pra div "conteudo", caso não seja, como eu posso fazer pra div "conteudo" ficar ao lado direito do menu e ocupar o restante da tela? (O restante seria da borda do menu até o lado direito da pagina, algo como um (hipoteticamente) width: 100%-180px
.
Desejado:
Obs: Estou usando o framework Bootstrap 4
.