CODEWITHSUNDEEP
htmlcss
Sharikov Vladislav
Sharikov Vladislav

Reputation: 7269

How to make nav element 100% width (so other elements will be under it, not right after it)

Sorry for my not very good english.

To understand my problem look this fiddle and this fiddle.

Take a look on the <nav></nav> part. If there are not many elements in menu, next block <section></section> will be right after menu. If there are many elements in menu all fine, because nav has enought width.

How to make next :

site

And nav must be 100% width not depending on amount of elements.

html <body> code:

<body>
    <div class="wrapper">
        <header>
            <center>
                <!-- logo and headers here -->
            </center>
        </header>
        <nav>
            <!-- menu here -->
        </nav>
        <section>
            <header><h1>Lorem ipsum</h1></header>
             <!-- main content here -->
        </section>
        <aside>
            <section>
                <header>
                    <h1>Lorem ipsum</h1>
                    <!-- block content here -->
                </header>
            </section>
        </aside>

        <footer>
        </footer>
    </div>
</body>

css code: 

body {
    color: #8f8f8f;
    background-color: #f8f8f8; 
    background: url(../images/background.jpg) 50% 50% no-repeat #f8f8f8;
    /* border: 5px solid #7e7e7e;*/
    margin: 0;
}

.wrapper {
    max-width: 960px;
    margin: auto;
    border: 1px solid #7e7e7e;
}

header {
    padding: 20px 0;
    margin: auto;
}

aside, section {
    margin-top: 10px;
}

section {
    float: left;
    width: 700px;
    padding-bottom: 50px;
    border: 5px solid #ccc;
}

aside {
    float: right;
    width: 240px;
    border: 1px solid #ccc;
}

aside section
{
    width: 230px;
    margin-top: 0px;
}

footer {
    clear: both;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0px;
    padding: 0px;
}

section header {
    background-color: #CCCCCC;
    padding: 5px 0;
    margin: 0px;
}

section header h1 {
    padding-left: 20px;
}

section p {
    padding: 10px 20px;
    margin: 0px;
}

/* css for nav */

Upvotes: 0

Views: 110

Answers (3)

haxxxton
haxxxton

Reputation: 6442

I make it a point of always adding a .clearfix css class to my reset stylesheet, as you will most likely need to clear out floated regions more than once in your site. It helps to give containers with only floated content back their height.

Add this to your stylesheet

CSS

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix{
    *zoom:1;
}

Then add class="clearfix" to your <nav> element (or even on your <ul class="nav">)

Here is a JSfiddle: http://jsfiddle.net/Uuyp8/8/

This clearfix solution is based upon the (famous?) micro clearfix hack explained in more detail here: http://nicolasgallagher.com/micro-clearfix-hack/

Upvotes: 4

Pete
Pete

Reputation: 58432

The nav is appearing on the left because you haven't cleared your floating lis. If you add the following style then it should work:

nav:after {clear:both; display:block; content:'';}

Example

Upvotes: 4

Erik A. Brandstadmoen
Erik A. Brandstadmoen

Reputation: 10588

Make nav float:left and the pink section clear:left (Or nav clear:right, same effect).

Upvotes: 2

Related Questions