0

I am making a new web page as an exercise to learn HTML5. Unfortunately, I have encountered a very frustrating problem.

My page has a "topbar" header element that contains one "h1" element (page title) and two "nav" elements. I want the "h1" element to appear on the left side of the "topbar." I want the "nav" elements to appear on the right side of the "topbar."

Nav element "nav_secondary" contains two links, "Register" and "Sign in". This should appear at the top right corner of the "topbar." Below "nav_secondary" should appear the "nav_main" element containing a row of navigation links.

Unfortunately, my site looks all wrong. The nav elements are all the way on the left side of the topbar and are pushed off the screen. I have spent hours changing the CSS around and Googling tutorials but have yet to find a solution.

Here is a screenshot of the top half of my page: top half of page displaying incorrectly

Here is a mock-up image of what I want it to look like: top half of page displaying correctly mockup

Here is my HTML code:

    <!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>Site Name - Page Title</title>
                    <link rel="stylesheet" type="text/css" href="css/styles.css">
            </head>

            <body>
                    <div class="fullscreen-bg"></div>
                    <header class="topbar">
                            <h1>Page Title</h1>
                            <nav class="nav_secondary">
                                    <a href="register.html">Register</a>
                                    <a href="signin.html">Sign in</a>
                            </nav>
                            <nav class="nav_main">
                                    <a href="home">Home</a>
                                    <a href="archive">Archive</a>
                                    <a href="about">About</a>
                                    <a href="contact">Contact</a>
                            </nav>
                    </header>

                    <section class="bodycontainer">
                            <article class="articlecontainer">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue, sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut lobortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Nullam varius augue placerat dapibus lobortis. </p>
                            </article>
                            <article class="articlecontainer">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue, sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut lobortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Nullam varius augue placerat dapibus lobortis. </p>
                            </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                    </section>
            </body>
    </html>

Here is my CSS:

    html {
            height:100%;
    }

    body {
            background: #000000;
            color: #ffffff;
            font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
            font-size: 12px;
            font-style: normal;
            font-variant: normal;
            font-weight: 500;
            line-height: 20px;
    }

    h1 {
            font-size: 24px;
    }

    .fullscreen-bg {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: hidden;
            z-index: -100;
            background-attachment: scroll;
    }

    @media (min-width: 767px) {
            .fullscreen-bg {
                    background: url('../img/background.jpg') center center / cover no-repeat;
            }
    }

    .topbar {
            background: #000000;
            position: fixed;
            display: block;
            top: 0;
            left: 0;
            right: 0;
            padding-left:50px;
            border: none;
            width: 100%;
            height: 100px;
            margin: none;
            z-index: 999;
            overflow: auto;
            background: rgba(0, 0, 0, 0.85);
    }

    .topbar h1 {
            float: left;
    }

    .nav_main {
            float: right;
            display: block;
            margin-top: none;
            margin-right: 50px;
            margin-bottom: none;
            margin-left: none;
            padding-top: 0px;
            padding-right: 50px;
            padding-bottom: 0px;
            padding-left: 0px;
            font-size: 24px;
            width: 100%;
            height: 50px;
            clear: both;
            overflow: auto;
    }

    .nav_main a:link {
            color: #ffffff;

    }

    .nav_main a:visited {
            color: #ffffff;
    }

    .nav_main a:hover {
            color: #C18E15;
    }

    .nav_secondary {
            position: relative;
            float: right;
            display: block;
            margin-top: 10px;
            margin-right: 50px;
            margin-bottom: none;
            margin-left: none;
            padding-top: 0px;
            padding-right: 50px;
            padding-bottom: 0px;
            padding-left: 0px;
            font-size: 14px;
            width: 100%;
            height: 50px;
            clear: both;
            overflow: auto;
    }

    .nav_secondary a:link {
            color: #ffffff;
    }

    .nav_secondary a:visited {
            color: #ffffff;
    }

    .nav_secondary a:hover {
            color: #C18E15;
    }

    .bodycontainer {
            padding-top: 100px;
            padding-left: 25px;
            padding-right: 0px;
            padding-bottom: 0px;
            display: block;
            overflow: hidden;
            margin: none;
    }

    .articlecontainer {
            background: #000000;
            padding-top: 0px;
            padding-left: 25px;
            padding-right: 25px;
            padding-bottom: 0px;
            display: block;
            overflow: hidden;
            float: left;
            margin: 10px;
            width: 300px;
            height: 300px;
            background: rgba(0, 0, 0, 0.85);
    }

Does anyone know how I can fix this so it appears the way it should as illustrated in my mock-up? Please let me know.

Thanks!

ag415
  • 392
  • 2
  • 15

2 Answers2

1

You can do following way using display:inline-block;.

Put first line header in one div. And the give it display:inline-block; to it and and second line navbar .nav_main and vertical-align:top; and remove width:100% from both navbar.

Give both navbar to float:right to make then right align.

html {
            height:100%;
    }

    body {
            background: #000000;
            color: #ffffff;
            font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
            font-size: 12px;
            font-style: normal;
            font-variant: normal;
            font-weight: 500;
            line-height: 20px;
    }

    h1 {
            font-size: 24px;
    }

    .fullscreen-bg {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: hidden;
            z-index: -100;
            background-attachment: scroll;
    }

    @media (min-width: 767px) {
            .fullscreen-bg {
                    background: url('../img/background.jpg') center center / cover no-repeat;
            }
    }

    .topbar {
            background: #000000;
            position: fixed;
            display: block;
            top: 0;
            left: 0;
            right: 0;
            padding-left:50px;
            border: none;
            width: 100%;
            height: 100px;
            margin: none;
            z-index: 999;
            overflow: auto;
            background: rgba(0, 0, 0, 0.85);
    }

   .firstBar > h1 {
    display: inline-block;
    vertical-align: top;
}

    .nav_main {
            float: right;
            display: block;
            margin-top: none;
            margin-right: 50px;
            margin-bottom: none;
            margin-left: none;
            padding-top: 0px;
            padding-right: 50px;
            padding-bottom: 0px;
            padding-left: 0px;
            font-size: 24px;
            float: right;
            height: 50px;
            clear: both;
            overflow: auto;
    }

    .nav_main a:link {
            color: #ffffff;

    }

    .nav_main a:visited {
            color: #ffffff;
    }

    .nav_main a:hover {
            color: #C18E15;
    }

    .nav_secondary {
            position: relative;
            float: right;
            display: block;
            margin-top: 10px;
            margin-right: 50px;
            margin-bottom: none;
            margin-left: none;
            padding-top: 0px;
            padding-right: 50px;
            padding-bottom: 0px;
            padding-left: 0px;
            font-size: 14px;
         display: inline-block;
         vertical-align: top;
            height: 50px;
            clear: both;
            overflow: auto;
    }

    .nav_secondary a:link {
            color: #ffffff;
    }

    .nav_secondary a:visited {
            color: #ffffff;
    }

    .nav_secondary a:hover {
            color: #C18E15;
    }

    .bodycontainer {
            padding-top: 100px;
            padding-left: 25px;
            padding-right: 0px;
            padding-bottom: 0px;
            display: block;
            overflow: hidden;
            margin: none;
    }

    .articlecontainer {
            background: #000000;
            padding-top: 0px;
            padding-left: 25px;
            padding-right: 25px;
            padding-bottom: 0px;
            display: block;
            overflow: hidden;
            float: left;
            margin: 10px;
            width: 300px;
            height: 300px;
            background: rgba(0, 0, 0, 0.85);
    }
   <div class="fullscreen-bg"></div>
                    <header class="topbar">
                           <div class="firstBar">
                           
                           
                           <h1>Page Title</h1>
                            <nav class="nav_secondary">
                                    <a href="register.html">Register</a>
                                    <a href="signin.html">Sign in</a>
                            </nav>
                            </div>
                            <nav class="nav_main">
                                    <a href="home">Home</a>
                                    <a href="archive">Archive</a>
                                    <a href="about">About</a>
                                    <a href="contact">Contact</a>
                            </nav>
                    </header>

                    <section class="bodycontainer">
                            <article class="articlecontainer">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue, sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut lobortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Nullam varius augue placerat dapibus lobortis. </p>
                            </article>
                            <article class="articlecontainer">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue, sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut lobortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Nullam varius augue placerat dapibus lobortis. </p>
                            </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                    </section>
ketan
  • 19,129
  • 42
  • 60
  • 98
0

You may use pull-left and pull-right classes:

<header class="topbar clearfix">
    <nav class="nav_secondary pull-left">
    </nav>
    <nav class="nav_main pull-right">
    </nav>
</header>

Ooops! You haven't used bootstrap. Sorry, You may use css:

.pull-left{
  float: left;
}
.pull-right{
  float: right;
}
.clearfix{
  overflow:hidden;/*there's others way, I just used overflow technique here*/
}

You may see this answer for further reading about clearfix techniques:

Community
  • 1
  • 1
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231