Positioning an enclosed div

How can one get a left floating element with a top position. For instance:

.......................
.......................
.......................
menu 1  ...............
menu 2  ...............
menu 3  ...............
.......................
.......................

I've used dots instead of normal开发者_如何学Go text to make it clearer. Note that the text (dots) flows around the enclosed div (menu).

Here's a starting HTML

<div id="section">
    <div id="nav">
      <ul><li>menu 1</li><li>menu 2</li><li>menu 3</li></ul>
    </div>
................................and so on...
</div>

CSS

div#section {
    width: 600px;
    float left;
}

div#nav {
    float: left;
    width: 200px;
    top: 180px; /* Doesn't work. See below */
}

The problem is that specifying a position (top:180px) doesn't work since the block is within a flow. Taking it out of the flow using position:relative puts the box at the correct position but it will then overlap the text of the enclosing div.

This effect can be created using a spacer div:

<div class="container">
    <div class="spacer"></div>
    <div class="nav">
        <ul>
            <li><a href="#">Menu Item 1</a></li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
        </ul>
    </div>
    <!-- Content -->
    <p>...</p>
    <p>...</p>
    <p>...</p>
</div>

.spacer {
    width:1px;
    margin-right:-1px;
    height:2em;
    float:left;  
}

.nav {
    clear:left;
    float:left;
    padding:1em 1em 1em 0; 
}

Example: http://jsfiddle.net/7Q7Fy/

Have you tried margin-top: 180px? Seems like it should work because I regularly use margin on floated elements to ensure some kind of gutter around its edge.

Use a positive margin-top value to shift the whole thing down:

div#nav {
    margin-top: 180px;
}

Should do the trick.

Your code will work as is if you cut the "nav" div out and paste it halfway through the text

<div id="section">
justo sit amet sem dignissim volutpat. Praesent non tellus erat. Pellentesque suscipit ipsum ut arcu pharetra viverra. Vivamus faucibus, libero eget tincidunt iaculis, mauris ligula suscipit ipsum, a tincidunt ipsum nisl non ipsum. Vivamus ullamcorper enim in lacus volutpat venenatis porta tellus tincidunt. Curabitur consectetur enim eget libero placerat vitae egestas 

<div id="nav">
      <ul><li>menu 1</li><li>menu 2</li><li>menu 3</li></ul>
</div>

justo sit amet sem dignissim volutpat. Praesent non tellus erat. Pellentesque suscipit ipsum ut arcu pharetra viverra. Vivamus faucibus, libero eget tincidunt iaculis, mauris ligula suscipit ipsum, a tincidunt ipsum nisl non ipsum. Vivamus ullamcorper enim in lacus volutpat venenatis porta tellus tincidunt. Curabitur consectetur enim eget libero placerat vitae egestas 
</div>