How to resize CSS Box with increase in content


Tags: html,css,css3,box

Problem :

I have created a CSS Box for my navigation bar. When I add new items in the navigation bar or viewed with lower resolution, the new item jumps to the next line. But, the box does not increase in size and remain absolute.

Could not post image due to lack of reputation. So, here is the link for images

Image 1: Navigation bar in 1366px width resolution Link: http://i19.servimg.com/u/f19/15/84/74/16/110.png

Image 2: Navigation bar in 1024x width resolution Link: http://i19.servimg.com/u/f19/15/84/74/16/210.png

body{
    /* Setting the default text color, size, page background and a font stack: */
    background:#ebebeb;
    font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size:87.5%;
    color:#7d7d7d;
    line-height: 1.429;
    margin: 0;
    padding: 0;
    text-align: left;
    margin: 0 auto; 
    width: 70%;
}

.mainHeader {
    clear: both;
    overflow:auto;
}

#logo {
    float:left;
}

#logo figcaption{
    visibility: hidden;
}


/*************************
******* NAVIGATION *******
**************************/

nav {
    margin: 90px 5px 10px 5px;
    padding: 8px;
    height: 60px; 
    width: auto;
    font-size: 1.143em;
    line-height: 90px;
    text-align: center;

    background-color: #f9f9f9;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 2px solid white;
    box-shadow: 0 0 5px #888;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px #888;
}

.mainHeader nav ul {
    list-style: none; 
    margin: 0 auto;
}

.mainHeader nav ul li {
    margin-right: 20px;
    float: left; 
    display: inline; 
}

nav ul li:nth-of-type(1){
    background-image: url('http://islington.ml/images/navigation/activeHome.png');
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center top;
}
nav ul li:nth-of-type(2){
    background-image: url('http://islington.ml/images/navigation/courses.png');
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center top;
}
nav ul li:nth-of-type(3){
    background-image: url('http://islington.ml/images/navigation/lectures.png');
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center top;
}
nav ul li:nth-of-type(4){
    background-image: url('http://islington.ml/images/navigation/admission.png');
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center top;
}
nav ul li:nth-of-type(5){
    background-image: url('http://islington.ml/images/navigation/facilities.png');
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center top;
}
nav ul li:nth-of-type(6){
    background-image: url('http://islington.ml/images/navigation/contact.png');
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center top;
}

.mainHeader nav a:link{
    padding: 5px 15px;
    text-decoration: none;
    font-weight: bold;	
}
     <body>
         <header class="mainHeader">
            <figure id="logo">
                <img src="http://islington.ml/images/logo.png" alt="Islington College Logo">
                <figcaption>ISLINGTON</figcaption>
            </figure> 
            <nav>
                <ul>
                    <li><a href="#" style="color: #EE2B32;">Home</a></li>
                    <li><a href="#">Courses</a></li>
                    <li><a href="#">Lectures</a></li>
                    <li><a href="#">Admission</a></li>
                    <li><a href="#">Facilities</a></li>
                    <li><a href="#">Contact</a></li>
		        </ul>
            </nav>
        <header>
    </body>



Solution :

Like I mentioned in my comment, you can avoid throwing elements out of the DOM flow with float by using display:inline-block. This will keep everything in the container regardless of the screen size. Look at adding media queries to your CSS to account for things like padding and text size. And this does have the clearfix (<div style="clear:both"></div>) right before </nav>.

Working Example (minus logo) http://codyo.me/so/30137192/

CSS

    body{
    /* Setting the default text color, size, page background and a font stack: */
    background:#ebebeb;
    font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size:87.5%;
    color:#7d7d7d;
    line-height: 1.429;
    margin: 0;
    padding: 0;
    text-align: left;
    margin: 0 auto; 
    width: 70%;
}

.mainHeader {
    clear: both;
}

#logo {
    float:left;
    display:none;
}

#logo figcaption{
    visibility: hidden;
}


/*************************
******* NAVIGATION *******
**************************/

nav {
    margin: 90px 5px 10px 5px;
    padding: 8px;
    min-height: 60px; 
    width: auto;
    font-size: 1.143em;
    /*line-height: 90px - Not sure why this was necessary.*/
    text-align: center;

    background-color: #f9f9f9;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 2px solid white;
    box-shadow: 0 0 5px #888;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px #888;
}

.mainHeader nav ul {
    list-style: none; 
    margin: 0 auto;
}

.mainHeader nav ul li {
    margin-right: 20px;
    display: inline-block; 
    padding-top:2.5em; /*Uses padding instead of line-height to clear the bg*/
}

    CSS Howto..

    How to modify only via CSS a color already defined in HTML?

    How can I make a div *not* expand to fill it's parent?

    How to close this menu clicking outside?

    How to put css class in to html:select element in jsp

    How to include button text and links as part of css

    How do I insert a “close” link in this list

    How to center a relative div in my case?

    How to set minimum height for a div?

    CSS : How to have an input field auto adjusting its width

    How to align p tag side by side using css?

    Possible to code a search box that searches for a specific tag in a div and then shows it / hides others? [closed]

    How to make text box to overlap with the image?

    How to change and maintain multiple color themes at runtime with css?

    How can I hide the backface of a block element rotated with transform: rotateX()?

    How to center float list elements inside an unordered list

    jQuery Slideshow in Chrome, Firefox, and Safari

    How do you skew a div and keep the background image unskewed

    How to write CSS selector for this page?

    How can i align the text in center of a row in css?

    CSS how to change the color of a link within a class

    How to scroll jQuery ui tabs?

    How to make a CSS animation/transition play at a fixed speed, not a fixed duration? [duplicate]

    How can I change the content of