4

I have the following code below however am confused as to why the div element rightnav appears below the div element leftnav if I apply a width property to it. What am I doing wrong or have I misunderstood the use of floats?

CODE

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-language" content="en-us" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="copyright" content="&copy; 2012" />

    <title>DIV example</title>

    <base href="" />

    <link rel="stylesheet" href="" />

    <style type="text/css">

    * {
        margin: 0px;
        padding: 0px;
        font-family: Arial, Verdana, sans-serif;
        font-size: 100%;
    }

    #content {
        width: 700px;
        margin-top: 20px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    }

    #leftnav {
        float: left;
        width: 200px;
        border-width: 1px;
        border-color: #000000;
        border-style: solid;
    }

    #rightnav {
        border-width: 1px;
        border-color: #000000;
        border-style: solid;
    }


    </style>
</head>
<body>
    <div id="container">
        <div id="content">
            <div id="leftnav">left nav</div>
            <div id="rightnav">right nav</div>
        </div>
    </div>
</body>
</html>

Output

enter image description here

Now if I amend the code as follows by applying the property width to the declaration rightnav, the element appears below leftnav. I thought that it may have to do with the width of the div element content however there is sufficient width with the combination of both div elements i.e. 200px + 200px < 700px

CODE

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-language" content="en-us" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="copyright" content="&copy; 2012" />

    <title>DIV example</title>

    <base href="" />

    <link rel="stylesheet" href="" />

    <style type="text/css">

    * {
        margin: 0px;
        padding: 0px;
        font-family: Arial, Verdana, sans-serif;
        font-size: 100%;
    }

    #content {
        width: 700px;
        margin-top: 20px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    }

    #leftnav {
        float: left;
        width: 200px;
        border-width: 1px;
        border-color: #000000;
        border-style: solid;
    }

    #rightnav {
        width: 200px;
        border-width: 1px;
        border-color: #000000;
        border-style: solid;
    }


    </style>
</head>
<body>
    <div id="container">
        <div id="content">
            <div id="leftnav">left nav</div>
            <div id="rightnav">right nav</div>
        </div>
    </div>
</body>
</html>

OUTPUT

enter image description here

Wex
  • 15,539
  • 10
  • 64
  • 107
PeanutsMonkey
  • 6,919
  • 23
  • 73
  • 103

2 Answers2

6

In your first example, #rightnav is not floating, but it stays at the right because it hasn't a clear:left; rule. See here: http://jsfiddle.net/5sHdg/

In your second example, when you specify a width for #rightnav, the browser has a explicit rule about the div's size, so it renders it as a block element should. But it doesn't float next to #leftnav because it lacks a float:left; rule. See here: http://jsfiddle.net/Br4Lm/

So rememeber:

  1. Use float in every div that needs to be positioned besides another one, thus overriding it's block element appearance.
  2. If you expect to have a div element below divs that re floating, be sure to include clear:both; (left, right, or both);
Martin Schaer
  • 3,986
  • 1
  • 23
  • 28
  • Yeah, this is a good answer as well. Your solution does require a bit more work to implement; don't forget to clear the floats inside `#content` with `overflow: hidden;` or something equivalent. – Wex Jun 12 '12 at 23:36
  • Here are some examples of those "equivalent" soluctions: http://jsfiddle.net/P2XCq/ – Martin Schaer Jun 13 '12 at 00:17
  • The clearfix solution is one often used because it comes with HTML / CSS frameworks as http://html5boilerplate.com/ – Martin Schaer Jun 13 '12 at 00:18
3

Adding overflow: hidden to #rightnav will solve your problem. http://jsfiddle.net/Wexcode/gCVaz/

An explanation of why this works can be found here: http://colinaarts.com/articles/the-magic-of-overflow-hidden

Wex
  • 15,539
  • 10
  • 64
  • 107
  • This will also take care of clearing the float inside of `#content`. – Wex Jun 12 '12 at 23:37
  • @Wex - Thanks. That resolves the problem but does not answer my question. Does apply a width without the property `overflow` mean that it will not flow next to the element floated to the left for example? – PeanutsMonkey Jun 12 '12 at 23:52
  • Well, think about how a (left) floated element works when placed before a container. All content that is inside the container gets pushed to the right of the floated element and then below the element. Notice how in your code, `#leftnav` takes up the entire width of `#rightnav`. In effect, there is no "right side" to push `#rightnav`, so it just gets pushed below the float. Notice the difference between what you've posted and what happens if you clear `#rightnav` instead: http://jsfiddle.net/Wexcode/6pQzU – Wex Jun 13 '12 at 00:05
  • Also, look what happens when you increase the width of `#righnav` to `250px`: http://jsfiddle.net/Wexcode/V3kf5 – Wex Jun 13 '12 at 00:05
  • @Wex - Thanks. When you say place before the container, what do you mean exactly? – PeanutsMonkey Jun 13 '12 at 00:11
  • In your markup. Floated elements will only do this special content-wrapping if they are placed before the container in the markup, as you've done with `
    ` and `
    `. The effects are pretty visible as I've outlined in [this comment](http://stackoverflow.com/questions/11005954/why-do-the-float-elements-not-align-side-by-side-when-using-widths/11006254#comment14384257_11006254).
     – Wex Jun 13 '12 at 00:12