The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> How use Flexbox for 2 columns, have a vertical navbar, trying to put in a column left
post Sep 12 2018, 11:29 AM
Post #1

Group: Members
Posts: 1
Joined: 12-September 18
Member No.: 26,712

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;

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Reply to this topicStart new topic
Replies(1 - 1)
post Sep 12 2018, 12:21 PM
Post #2

Don't like donuts. Don't do MySpace.

Group: WDG Moderators
Posts: 18,505
Joined: 9-August 06
Member No.: 6

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:


- Lo-Fi Version Time is now: 29th January 2020 - 03:41 AM