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?

[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;
}

[Paul O'B]

Hi,

When you move an element with relative positioning you effectively move the element to a new position but everything else on the page thinks the element is still where it always was. The space that the element previously occupied is preserved. This is by design because of the way that relative position is meant to be used.

If you want to move an element then you use the margin property and the element stays in the flow of the document. (If you use absolute positioning then the element is removed from the flow.)

Sorry but this was a long-winded way to just say change your relative positions to margin positions as follows.

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

You can of course put some space around the content side if you wish by specifying a positive margin for the other 2 sides.

margin-right:5px;
margin-bottom:5px;

Hope that helps.

Paul