Help - Search - Members - Calendar
Full Version: How use Flexbox for 2 columns
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
I have a Vertical Navbar coded in HTML with a CSS3 stylesheet. It uses some Divs and Classes and a Wrapper and I don't fully understand how to use Divs and Classes with the periods in between. The problem is that I want to put the Navbar in a left column and have text to the right of it. I can get this by floating the it but then it my text boxes are completely underneath the Navbar with my text surrounding it with a 0 margin. Surely there is a use of a Navbar which doesn't fill the whole width of a computer screen?

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

    <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>
<!-- 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.   -->
        <a href="#">Americas</a>
          <ul> <!-- List 1.1   -->
            <li><a href="">Home</a></li>
            <li><a href="">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>
        <a href="#">Ancient World</a>
          <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>
        <a href="#">Support</a>
          <ul> <!-- List 1.3   -->
            <li><a href="#">Forvm</a></li>
            <li><a href="#">Menu item2</a></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="" target="_blank"></a>
  It is Not responsive however.</h6>



Relevant CSS stylesheet

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

I don't know anything about flexbox, but I know something about floats. wink.gif

When you float a box, like the menu in your case, it's said the floated box is taken out of the flow and it doesn't take up any space. Because of this, other boxes that are beside it aren't pushed away. But, their text content is. You can see this on your page. The text goes free from the float, but the P boxes themselves don't.

The solution is very simple. Give the adjacent boxes enough left margin for them to go free from the float. If I read the style sheet right 200px should do it. But you probable want some more for it to look nice. Overusing DIVs is not a good thing, but it may be easier to wrap the content in a DIV and apply the left margin to that. Later you may add headings and stuff and a wrapper DIV would keep the style rules down.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2021 Invision Power Services, Inc.