Dispositions des boîtes HTML avec CSS 3

Bonjour à tous

Débutant en web design, je me casse les dents pour disposer mes boîtes comme je l'entends.

J'aimerais un header, une colonne gauche, une colonne droite, du texte (article) et un footer.
J'ai essayé d'utiliser les flex et les float, sans succès

Il s'agit d'un site sur les guitares, un projet à rendre en cours.

Voilà le HTML

<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Style_mes_guitares_bis.css">

<div class = "page_entiere">
	<header>
		<h1>Mes guitares</h1>
	</header>

	<div class = "baniere">banière photo
	<!-- <img class = "baniere" src="baniere_gibson.jpg"/></a>	-->
		<ul class = "menu_horizontal">
			<li>Fender</li>
			<li>Gibson</li>
			<li>Ibanez</li>
			<li>Gretsch</li>
		</ul>
	</div>
		
	<span class = "colonne_gauche"> LA COLONNE DE GAUCHE</span>
	<!-- <div><img class = "imggauche" src = "jem.jpeg"/></a></div> -->
	<span class = "colonne_droite"> LA COLONNE DE DROITE</span>




	<p>
		Lorem ipsum [...] blablabla
	</p>

	<footer>
		<tr>
			<td>Plan du site</td>
			<td>Nous contacter</td>
			<td>Evénements</td>
		</tr>

	</footer>
</div>

et voilà le code CSS :

.page_entiere{
	display:flex;
	flex-direction:column;
	justify-content: flex-start;
}

h1{
	background-color: red;
	border:solid;
}

.baniere{
	background-color: blue;
	border:solid;
}

.menu_horizontal{
	background-color: orange;
	display:flex;
	border:solid;
}

.menu_horizontal li{
	border:solid;
}

p{
	background-color: lightgray;
	border:solid;
	color:black;
}

.colonne_gauche{
	background-color: green;
	border:solid;
}

.colonne_droite{
	background-color: green;
	border:solid;
}

footer{
	background-color: purple;
	border:solid;
}

Pour l'instant ça donne :



Merci de votre aide

Bonjour Noobuntu,

Difficile de répondre à ta demande sans faire le travail à ta place...

Le displaying est la base essentielle à connaitre du langage CSS. Le reste n'est que de l'agrément.
Mon conseil sera donc de reprendre un cours puis de chercher à comprendre comment certains sites sont structurés, alsacreations par exemple, avec l'aide du déboggeur du navigateur.

Si tu rencontres des blocages spécifiques lors de cet apprentissage, nous seront ravis de t'aider à les surmonter.

Bonjour,
Puisque tu débutes, tu devrais partir d'un modèle que tu pourra garder sur toute tes pages !
Fais un test en repartant de zero, avec l'ossature proposée par Alsacréation
ICI ==> http://www.alsacreations.com/tuto/lire/588-trois-colonnes-float.html
modifies le pour obtenir ton ossature a toi !
Penses a être "responsive" pour les portables tablettes etc ...

Revient ici, pour nous tenir au courant