Site com 3 colunas verticais, podendo trocar rapidamente as laterais (fixas ou responsivas)

[klonder 14]

Após muita, muita pesquisa, vou deixar um código de um template com 3 colunas verticais, sendo que a coluna do meio responde ao tamanho da janela e as laterais podem responder ao tamanho ou serem fixas (vai do gosto do desenvolvedor). Há também a possibilidade de alterar rapidamente a posição entre as colunas laterais, bastando alterar o float de cada uma delas, sem mexer na marcação.

Motivo do post: Pode ser que ajude alguém com o mesmo problema. Postarei também para minhas consultas futuras.

Motivo 2: O site do Maujor tem um bom exemplo (https://www.maujor.com/tutorial/qqer-ordem-3colunas.php), porém não consegui manter as colunas laterais fixas. Além disso, para alterar as colunas de lugar é necessário fazer contas, mexer com números, distância dos widths, etc. Não é complexo, mas considerei o código abaixo mais simples, pois basta alterar os floats conforme descrito abaixo. Deixo a referência do site a quem interessar.

Motivo 3: Ainda no site do Maujor (https://www.maujor.com/layout3col.shtml) há esse exemplo que quase atendeu o meu problema, porém é muito complexo e a maneira que encontrei também considerei mais fácil (já utilizei muito esse esquema em projetos anteriores, porém complica na responsividade).

Motivo 4: Principal referência que resolveu todos os meus problemas: https://www.richardbarros.com.br/css/css-truques-para-dominar-a-propriedade-float. Esse site foi a "Eureka" para eu deixar exatamente conforme eu queria.

 

Segue o código:

 

CSS:

<style>
#navGlobal {
	height:400px;
}
#navEsquerda {
    float:left;
    width:250px;/*Está em pixels, mas poderia deixar em porcentagem: ex: 20% */
    background:#FFF;
    height:100%;
}
#navDireita {
    /*margin-left:var(--margemEsquerda); Opcional*/
    word-break: break-all; word-wrap: break-word;
	height:100%;
}
#navLinks {
    float:right;
    width:200px;/*Está em pixels, mas poderia deixar em porcentagem: ex: 20% */
    height:100%;
    background:#CCC;    
}
#navConteudo {
	overflow:auto;
	height:100%;
	background:#EFEFEF;
}
</style>

 

HTML:

<div id="navGlobal">
	<div id="navEsquerda">Menu</div>
	<div id="navDireita">
		<div id="navLinks">Links</div>
		<div id="navConteudo">Conteúdo do meu site</div>
	</div>
</div>

Nos comentários do código, informei o que alterar para manter as colunas laterais fixas ou em porcentagem, bem como para trocá-las de lugar uma lateral com o outra.

Deixei cores vibrantes como modelo para o usuário alterar depois.

Abraços a todos(as).

[Marcos_imasters 288]

Olá amigo,Bom Existe o Grid que você consegue fazer isso facilmente. pelo código não entedi bem como você quer se layout se tiver uma imagem posso cria um código de exemplo aqui pra você.