Help with CSS positioning

[spl1nter]

http://ghc.ithium.net/epi/

As you can see the text has a big space between it and the menu.

#content
{
background: #FFFFFF;
border: 1px #000000 solid;
border-top: 0px;
position: absolute;
width: 750px;
top: 162px;
padding: 4px;
float: right;
}
#content .menu_left
{
background: #FFFFFF;
height: 200px;
width: 150px;
border: 1px #000000 solid;
position: relative;
top: -15px;
left: -75px;
float: left;
text-align: center;
}

<div id='content'>

<div class='menu_left'>

<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Products</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact</a></li>
</ul>

</div>

<p>Lorem ipsum dolor ... nulla.</p>

</div>

How can I make the text flow around the menu?

[hemebond]

Originally Posted by spl1nter

#content .menu_left
{
position: relative;

This does not remove the element from the document flow. You need to use position:absolute.

[spl1nter]

I know.

But because I have moved the menu there is a 'hole' where it should normally be. I want the text to be in that hole.

Check the link and you'll see what I mean.

[spl1nter]

Got it:

#content .menu_left
{
background: #FFFFFF;
height: 200px;
width: 150px;
border: 1px #000000 solid;
position: relative;
top: -15px;
left: -75px;
float: left;
text-align: center;
margin-right: -65px;
margin-bottom: -10px;
}

[bradyj]

hemebond's got it right -- if you position absolute, that whole will be filled without using any negative margins, since it takes that out of the flow as he said.

[spl1nter]

Yeah, but then the text goes behind the menu and can't be seen.

[mcdougals4all]

Along with the absolute positioning, try floating an empty div to the left of your text and match it's height to the menu. Then adjust the width to push your text out to the left. It will appear the text is wrapped around the menu, even though the menu is out of the normal flow.

It adds a meaningless element, but if you can live with that it should achieve the effect.