Hi. I'm having a weird problem and I don't know why. I have floating left and right nav columns, and a navbar and body that I want to center. However, my navbar and body are invading my floating leftnav and rightnav. I gave both ids a red border to highlight the problem.

http://img402.imageshack.us/img402/3563/barsa.png

Here's my CSS:

    @charset "utf-8";
/* CSS Document */


#container {

    width:950px;
    border: 1px solid #000000;
    background-color: #99ccff;

    font-family: arial;
    font-size: 13;

}

#container a {

    font-family: arial;
    font-size: 13;

}

#header {

    width:950px;
    height:120px;
    border: 1px solid #000000;

}

#lnav {

    float:left;
    width:120px;
    height:500px;
    border: 1px solid #000000;  

}

#rnav {

    float:right;
    width:120px;
    height:500px;
    border: 1px solid #000000;

}

.navbar {

    height:20px;
    border: 5px dotted #FF0000;

}

#body {

    height:480px;
    border: 5px solid #FF0000;

}

#footer {

    width:950px;
    height:60px;
    border: 1px solid #000000;

}

What's going on? How can I fix it?

4 answers

danwellman 5600
0
points
This was chosen as the best answer

Ok, several changes are needed, first the HTML. As the right nav follows the body (the

with the id body - this is slightly ambiguous, I would change this to inner-container perhaps, or content), it should come after it in the source code. Also, to make the floats simpler, put the navbar inside the body:

<div id="container">

        <div id="header">
            header
        </div>

        <div id="lnav">
            lnav
        </div>

        <div id="body">

            <div class="navbar"> 
                navbar
                <a href="1">Link 1</a>
                <a href="2">Link 2</a>
                <a href="3">Link 3</a>
                <a href="4">Link 4</a>
            </div>

            body
        </div>

        <div id="rnav">
            rnav
        </div>

        <div id="footer">
            footer
        </div>

    </div>

Then some tweaks to the CSS are required too:

#container {

    width:950px;
    border: 1px solid #000000;
    background-color: #99ccff;

    font-family: arial;
    font-size: 13;

}

#container a {

    font-family: arial;
    font-size: 13;

}

#header {

    width:950px;
    height:120px;
    border: 1px solid #000000;

}

#lnav {

    float:left;
    width:120px;
    height:500px;
    border: 1px solid #000000;  

}

#rnav {

    float:right;
    width:120px;
    height:500px;
    border: 1px solid #000000;

}

.navbar {

    height:20px;
    border: 5px dotted #FF0000;

}

#body {

    height:480px;
    border: 5px solid #FF0000;
    float: left; <- the body container should float to allow the rnav to float to its right
    width:696px; <- the body needs a defined width to stop it collapsing to the width of its content

}

#footer {

    width:950px;
    height:60px;
    border: 1px solid #000000;
    clear:both; <- the footer needs to clear the float to stop the container collapsing
}

That stops the invasion...Heres a screenshot: fixed pic

You just need to fix the borders now...

Answered almost 6 years ago by danwellman
danwellman 5600
1
point

Try giving the nav bar and body widths and float them as well.

I'm assuming in the HTML you have the leftnav first, followed by the navbar and body (optionally you should maybe put the nav bar in the body and just float the body), followed by the rightnav..?

Try posting your HTML too if this doesn't help...

Answered almost 6 years ago by danwellman
0
points

Thanks for the response Dan. Floating the navbar and body did not work. -float:inherit; didn't change a thing. (see screencap above) float:left; and float:right; gave me a mess.

Here's the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Page 1 <!--there are title tags around Page 1-->

<div id="container">

    <div id="header">
    header
    </div>

    <div id="lnav">
    lnav
    </div>

    <div id="rnav">
    rnav
    </div>

    <div class="navbar"> 
    navbar
    <a href="1">Link 1</a>
    <a href="2">Link 2</a>
    <a href="3">Link 3</a>
    <a href="4">Link 4</a>
    </div>

    <div id="body">
    body
    </div>

    <div id="footer">
    footer
    </div>

</div>

Answered almost 6 years ago by Ravi Bradley
0
points

Hey Dan, that screenshot is exactly the way I wanted it.

I copy-pasted your code and it didn't come out that way though. Tested it in both Chrome and Firefox. Here's a screenshot. alt text

Is it because I'm using DOCTYPE strict instead of transitional?

I switched to transitional, and it works awesome. Thanks for the help, Dan.

Do you know why they won't let me do it in strict?

Answered almost 6 years ago by Ravi Bradley