Geek Answers Handbook

Vertical Navigation and Div Side by Side

I have vertical navigation, and the other <div>where the content should be. When I try to place these <div>side by side, the other <div>(text box) goes under the main container, and I can’t get it there, no matter what I tried. I hope you can help me.

HTML

<body>
    <!--Main Container-->
    <div class="container-main">

    <!--Main Navigation-->
    <nav class="main-nav">
        <ul class="navigation">
            <li><a href="#">Home</a></li>
            <li><a href="#">Works</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
            <?php
              include($_GET['site'].".php");
            ?>
    </div>

    <!--Thumbnail Navigation-->
    <div id="prevthumb"></div>
    <div id="nextthumb"></div>

    <!--Arrow Navigation-->
    <a id="prevslide" class="load-item"></a>
    <a id="nextslide" class="load-item"></a>

    <div id="thumb-tray" class="load-item">
        <div id="thumb-back"></div>
        <div id="thumb-forward"></div>
    </div>

    <!--Time Bar
    <div id="progress-back" class="load-item">
        <div id="progress-bar"></div>
    </div>-->

    <!--Control Bar-->
    <div id="controls-wrapper" class="load-item">
        <div id="controls">

            <a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>

            <!--Slide counter
            <div id="slidecounter">
                <span class="slidenumber"></span> / <span class="totalslides"></span>
            </div>-->

            <!--Slide captions displayed here-->
            <div id="slidecaption"></div>

            <!--Thumb Tray button-->
            <a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>

            <!--Navigation-->
            <ul id="slide-list"></ul>
    </div>
</body>

CSS

/*MAIN BODY STYLING*/

html{
  height: 100%;
}
body{
   font-family: 'Lato', sans-serif !important;
   min-height: 100%;
}

/*MAIN BODY STYING ENDS*/
ul#demo-block{ 
    margin:0 15px 15px 15px; 

}
ul#demo-block li{ 
    margin:0 0 10px 0; padding:10px; display:inline; float:left; clear:both; color:#aaa; background:url('styles/bg-black.png'); font:11px Helvetica, Arial, sans-serif; 

}
ul#demo-block li a{ 
    color:#eee; font-weight:bold; 

}

.container-main{
    height: 100%;
    margin: 0 auto;
    width: 100%;
}

.container-textbox{
    background-color: rgba(112,128,144, 0.6);
    width: 30em;
    height: 20em;

}

.main-nav{
    background-color: rgba(192,192,192, 0.3);
}

.navigation{

}

nav {
    padding-left: 0;      
    margin-left: 0; 
    height: 100%;
    width: 250px;
    font-size: 11pt;
    position: relative;
    margin-left: 230px;
}
nav ul {    
    padding-top:60px;
}

nav li {
    margin-bottom:5px;
}

nav a {
    color: #fff;
    display: block;
    width: 100px;
    background-color: rgba(192,192,192,0);
    text-decoration: none;
    text-shadow: 1px 1px 0px #283744;      
    width: 8em;
    line-height:60px; 
    padding-left:45px;
    font-size:20px;
    word-spacing:10%;

}
nav li a {
    /* In the transition you define the property that 
    you want a transition attached to and the duration*/
    transition: background .3s;
    -moz-transition: background .3s; /* Firefox 4 */
    -webkit-transition: background .3s; /* Safari and Chrome */
    -o-transition: background .5s; /* Opera */
    background-color: rgba(0, 0, 0, 0.4);
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    text-shadow: 0.5px 0.5px #fff;

}

nav li:last-child a {

}
nav a:hover, nav a:active {
    background-color: rgba(112,128,144, 0.4);
}
+4
source share
1 answer
<body>
    <!--Main Container-->
    <div class="container-main">

        <!--Main Navigation-->
        <nav class="main-nav">
            <ul class="navigation">
                <li><a href="#">Home</a></li>
                <li><a href="#">Works</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>


        <?php
        include($_GET['site'].".php");
        ?>
    </div>

    <!--Thumbnail Navigation-->
    <div id="prevthumb"></div>
    <div id="nextthumb"></div>

    <!--Arrow Navigation-->
    <a id="prevslide" class="load-item"></a>
    <a id="nextslide" class="load-item"></a>

    <div id="thumb-tray" class="load-item">
        <div id="thumb-back"></div>
        <div id="thumb-forward"></div>
    </div>

    <!--Time Bar
    <div id="progress-back" class="load-item">
        <div id="progress-bar"></div>
    </div>-->

    <!--Control Bar-->
    <div id="controls-wrapper" class="load-item">
        <div id="controls">

            <a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>

            <!--Slide counter
            <div id="slidecounter">
                <span class="slidenumber"></span> / <span class="totalslides"></span>
            </div>-->

            <!--Slide captions displayed here-->
            <div id="slidecaption"></div>

            <!--Thumb Tray button-->
            <a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>

            <!--Navigation-->
            <ul id="slide-list"></ul>



        </div>            

    </div>
</body>

/ BASIC BODY STYLE /

        html{
            height: 100%;
        }
        body{
            font-family: 'Lato', sans-serif !important;
            min-height: 100%;
        }
        *{

            margin: 0;
            padding: 0;
            list-style: none;
        }
        /*MAIN BODY STYING ENDS*/
        ul#demo-block{ 
            margin:0 15px 15px 15px; 

        }
        ul#demo-block li{ 
            margin:0 0 10px 0; padding:10px; display:inline; float:left; clear:both; color:#aaa; background:url('styles/bg-black.png'); font:11px Helvetica, Arial, sans-serif; 

        }
        ul#demo-block li a{ 
            color:#eee; font-weight:bold; 

        }

        .container-main{
            height: 100%;
            margin: 0 auto;
            width: 100%;
        }

        .container-textbox{
            background-color: rgba(112,128,144, 0.6);
            width: 30em;
            height: 20em;

        }

        .main-nav{
            background-color: rgba(192,192,192, 0.3);
        }

        .navigation{

        }

        nav {
            padding-left: 0;      
            margin-left: 0; 
            height: 100%;
            width: 250px;
            font-size: 11pt;
            position: relative;
            margin-left: 230px;
        }
        nav ul {    
            padding-top:60px;
        }

        nav li {
            margin-bottom:5px;
        }

        nav a {
            color: #fff;
            display: block;
            width: 100px;
            background-color: rgba(192,192,192,0);
            text-decoration: none;
            text-shadow: 1px 1px 0px #283744;      
            width: 8em;
            line-height:60px; 
            padding-left:45px;
            font-size:20px;
            word-spacing:10%;

        }
        nav li a {
            /* In the transition you define the property that 
            you want a transition attached to and the duration*/
            transition: background .3s;
            -moz-transition: background .3s; /* Firefox 4 */
            -webkit-transition: background .3s; /* Safari and Chrome */
            -o-transition: background .5s; /* Opera */
            background-color: rgba(0, 0, 0, 0.4);
            width:100%;
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            text-shadow: 0.5px 0.5px #fff;

        }

        nav li:last-child a {

        }
        nav a:hover, nav a:active {
            background-color: rgba(112,128,144, 0.4);
        }

Replace css and html with it. Hope this works.

0
source

More articles:


All Articles