How can I make a DIV element Fixed but non-Scaleable?


Tags: html,css,html5

Problem :

Hopefully I'm asking this question right.

Basically, I'm trying to implement a drop down menu into my design. I've been looking around for help coding it, since I'm still relatively new to HTML/CSS and found a few great tutorials that I have altered a bit to match what I have in mind.

The problem I have now is that I don't want my stuff to be scaled what so ever. When the browser is resized, it moves my div holding my drop down menu. This is not how I want my design. Hopefully the description I wrote can help you identify what I'm looking for.

I have read that you can achieve this by using a wrapper div to set the resolution of the site. I have tried doing this, but it breaks my current code, at least the way I'm trying to implement it.

Here is an example of the display that I wish to accomplish:

Screenshots

Below is snippets of code from my HTML and CSS projects:

 HTML:
<!--Nav Wrapper-->
    <div class="wrapper">
    <ul class="nav">
        <li><a href="#">Final Cut</a>
            <!--Begin Main Div-->
            <div class="navMain">
                <!--Begin Sub Nav-->
                <div class="navLeft">
                    <span class="nav-titles">DBZ Final Cut: Navi</span><br><br><br>
                    <div class="navDropLinks"><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a></div>
                    <div class="navDropLinks"><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a></div>
                    <div class="navDropLinks"><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a></div>
                    <div class="navDropLinks"><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a></div>
                    <br><br><span>This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                    This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                    This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.</span>
                </div>
                <!--End Sub Nav-->
    <li><a href="#">Articles</a></li>
    <li><a href="#">Sets</a></li>
    <li><a href="#">Resources</a></li>


    </ul> <!--End Nav List-->
    </div> <!--End of Nav Wrapper-->

CSS:

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: Serif, sans-serif;
    background: white;
    font-size: 62.5%;
    color: black;
}

.wrapper {
    font-size: 1em;
    padding: 2em;
    margin: 0 auto;
    width: 80%;
    background-color: white;
}

.nav {
    list-style:none;
    width:940px;
    margin:30px auto 0px auto;
    height:43px;
    padding:0px 20px 0px 20px;

    background: #014464;
    background: -moz-linear-gradient(top, #0272a7, #013953);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

    border: 1px solid #002232;
}

.nav li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;
}

.nav > li > a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px; 
    color: #EEEEEE;
    display:block;
    outline:0;
    text-decoration:none;
    text-shadow: 1px 1px 1px #000;
    text-transform:uppercase;
}

.nav > li:hover {
    left: -1px;
    border: 1px solid #777777;
    padding: 4px 9px 4px 9px;

    /* Background color and gradients */

    background: #F4F4F4;
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
}

.nav > li:hover > div {
    left: -1px;
    display: block;
}

.nav > li > div {
    position: fixed;
    right: 0px;
    top: 87px;
    height: 300px;
    display: none;
    padding: 10px 10px;
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.4);
    background:#F4F4F4;
    overflow: hidden;
}

.navMain {
    margin:-4px auto;
    position:fixed;
    text-align:left;
    border:1px solid #777777;
    border-top:none;
    width: 900px;

    /* Gradient background */
    background:#F4F4F4;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
}

.nav-titles {
    display: inline-block;
    font-size: 1.2em;
    font-weight: bold;
    text-align: left;
    padding-right: 3px;
}

.navIcon {
    width: 15px;
    height: 15px;
}

.navDropLinks {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px; 
    display:block;
    padding-bottom: 6px;
}

.navDropLinks > a {
    color: black;
    text-decoration: none;
    font-weight: bold;
}

.navLeft {
    position: absolute;
    left: 10px;
    width: 288px;
    display: inline-block;
    font-size: 11px;
    text-align: left;
    padding-right: 3px;
}

.navCenter {
    position: absolute;
    width: 280px;
    left: 313px;
    font-size: 11px;
    text-align: center;
}

.navRight {
    position: absolute;
    right: 10px;
    width: 280px;
    display: inline-block;
    font-size: 11px;
    text-align: center;
    padding-left: 3px;
}

.navImage {
    display: inline-block;
    width: 275px;
    height: 120px;
}


Solution :

As it is fixed it will not react to the parent div. So to fix it make the wrapper fixed instead that way you can center it and your content will adjust around the parent i.e wrapper.

I made a new wrapper inside of your wrapper and called it navWrapper;

<div id="navWrapper">    
    <ul class="nav">
        <li><a href="#">Final Cut</a>
            <!--Begin Main Div-->
            <div class="navMain">
                <!--Begin Sub Nav-->
                <div class="navLeft">
                    <span class="nav-titles">DBZ Final Cut: Navi</span><br><br><br>
                    <div class="navDropLinks"><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a></div>
                    <div class="navDropLinks"><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a></div>
                    <div class="navDropLinks"><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a></div>
                    <div class="navDropLinks"><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a></div>
                    <br><br><span>This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                    This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                    This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.</span>
                </div>
                <!--End Sub Nav-->
    <li><a href="#">Articles</a></li>
    <li><a href="#">Sets</a></li>
    <li><a href="#">Resources</a></li>


    </ul> <!--End Nav List-->

    </li>
    </ul>
        </div>
    </div>

and then added the css to it which you can see below.

#navWrapper {
    width: 982px;
    position: fixed;
    top: 30px;
    left: 0px;
    right: 0px;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
}

    CSS Howto..

    How to dynamically change the line height of each line in content editable div in php jquery?

    How to have multiple CSS transitions on an element?

    How to make CSS width to fill parent?

    How to Load Resources (Css, js files) in Laravel 4 (Optimization)

    How to make a website look like a Windows Office application? [closed]

    What is the best way to store css data inside database and call it similar to how a css file would be

    How to make a CSS file valid?

    How to handle this CSS issue with Wordpress?

    How to style Flipview as inline-block?

    How to make a scrollable div inside of a div with a specific height

    How to make a snowboard (or squeezed rectangle) shaped div in css?

    How can I add block colour to the CSS of my list?

    How to add a css class programmatically to a piece of code?

    How do I change the border lines COLOUR on the table view

    jQuery - Navbar hover did not show

    how can I create overlay div to fit the rest of the screen

    How to create a perfect 3 columns layout using CSS , with cross-browser support?

    How do i use a simple string variable with jquery?

    How to abstract this single case (showing text field based on selection of a drop down list) into a general function in jQuery?

    how to create css shapes X which has to be background inside? [closed]

    How can I Find/Replace part of a wildcard search in Notepad++

    How to get background image/ image to stretch to fill container via CSS?

    How do I “smarten” my HTML/CSS tables so text fits to one line (cleverly)

    How to debug the different behavior of the same browser on the different platforms?

    How do I set dynamic width to a block element?

    (CSS) Set Id for Class How to Use

    How to properly align something that resizes in a specific location

    How to toggle css media queries on and off

    How can i put this SVG ‘Sidebar Menu’ in the right side?

    Avoid children to interfer with the parents hover. (or how to .stop(false,true) a css transition)