I would like to use Flexbox to keep the Navbar at left and wrap my <p> text and it's box around it at right.
The main page showing the Overlapping of the Navbar and the <p> text is on the main page here:
Home Page
Another coding where I'm trying to put the Navbar at right but removed the wrapper is here. Unfortunately the Navbar fills the whole width of the screen. You can get here by following the "2 Columns with Navbar T3" link.
Navbar with float removed
HTML code
CODE
<html>
<body>
<main>
<h1>2 Columns with NavBar</h1>
<div class="row">
<div class="column righty-nitey">
<!-- maybe class=column & a div in that class is named righty-nighty -->
<!-- right content, use odd word to verify not a resrvd keyword -->
<p>This page is to test the use of columns with a NavBar </p>
<p>This part is just the main text in the page bulk. </p>
</div>
<!-- Animated, Mobile Friendly Vert Navigation Adam Bray HTML -->
<!-- HTML 5 & CSS 3 vertical menu -->
<div class="column lefty">
<!-- <div class="wrapper"> maybe not needed -->
<nav class="vertical">
<ul> <!-- List 1. -->
<li>
<a href="#">Americas</a>
<div>
<ul> <!-- List 1.1 -->
<li><a href="https://coinsandhistory.com/index.html">Home</a></li>
<li><a href="https://coinsandhistory.com/countries/zHTML_Murach/chapter_6-2a.html">Chapter 6-2a</a></li>
<li><a href="#">South America</a></li>
<li><a href="#">The Carribean</a></li>
<li><a href="#">North America</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Ancient World</a>
<div>
<ul> <!-- List 1.2 -->
<li><a href="#">Greece</a></li>
<li><a href="#">Other Pre-Roman</a></li>
<li><a href="#">Roman Repubic</a></li>
<li><a href="#">Roman Empire</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Support</a>
<div>
<ul> <!-- List 1.3 -->
<li><a href="#">Forvm</a></li>
<li><a href="#">Menu item2</a></li>
</ul>
</div>
</li>
</ul> <!-- End List 1. -->
</nav> <!-- end nav type div -->
</div> <!-- end column lefty div -->
</div> <!-- end row div -->
<h6>This is the Animated, Mobile Friendly Vert Navigation Menu I found on
<a href="http://www.adam-bray.com/blog/" target="_blank">Adam-Bray.com</a>
It is Not responsive however.</h6>
</main>
</body>
</html>
Relevant CSS stylesheet
CODE
* {
margin: 0;
padding: 0;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* body css is called in home-pg_my-style.css, dont need here */
/* from Stackoverflow */
/* div.wrapper {
margin: 100px auto auto -4px;
width: 200px;
float: left; } */
/*
p {
font-family: georgia;
font-size: 1rem;
line-height: 25px;
margin: 24px 0;
text-align: center;
} */
nav.vertical {
border-radius: 14px;
box-shadow: 0 0 10px rgba(0,0,0,.15);
overflow: hidden;
text-align: center;
}
nav.vertical > ul {
list-style-type: none; /* i.e. no underline */
}
nav.vertical > ul > li {
display: block;
}
nav.vertical > ul > li > a {
/* most critical css, background not hovered or clicked */
background-color: rgb(157, 34, 60);
background-image: -webkit-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
background-image: -moz-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
background-image: -o-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
/* below is the normal backgd used for Chrome */
background-image: linear-gradient(215deg, rgb(004, 51, 98), rgb(157, 34, 60));
border-bottom: 1px solid rgba(255,255,255,.1);
box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
color: rgb(255,255,255);
display: block;
font-size: .80rem;
font-weight: 500;
height: 50px;
letter-spacing: .5rem;
line-height: 44px;
text-shadow: 0 1px 1px rgba(0,0,0,.1);
text-transform: uppercase;
transition: all .35s ease;
text-decoration: none;
}
nav.vertical > ul > li > a:hover {
/* css for hover effect */
background-color: rgb(114, 51, 98);
background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
/* below is the hover backgd used for Chrome */
background-image: linear-gradient(150deg, rgb(104, 51, 98), rgb(184, 51, 98));
cursor: pointer;
}
nav.vertical > ul > li > div {
background-color: rgb(255,255,255);
}
nav.vertical > ul > li > div > ul {
list-style-type: none;
}
nav.vertical > ul > li > div > ul > li > a {
background-color: rgb(255,255,255);
border-bottom: 1px solid rgba(0,0,0,.05);
color: #333331; /* dk grey */
display: block;
font-size: 1.1rem;
padding: 10px 0;
text-decoration: none;
transition: all 0.35s linear;
}
nav.vertical > ul > li > div > ul > li:hover > a {
background-color: #1599c4; /* link box bar color was Lightblue #ADD8E6 */
color: rgb(255,255,255); /* white text */
padding: 10px 0 10px 50px;
}