...

View Full Version : Help with CSS positioning



spl1nter
10-04-2004, 09:59 PM
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
10-04-2004, 10:54 PM
#content .menu_left
{
position: relative;This does not remove the element from the document flow. You need to use position:absolute.

spl1nter
10-04-2004, 11:08 PM
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
10-04-2004, 11:21 PM
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
10-04-2004, 11:56 PM
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
10-07-2004, 02:38 PM
Yeah, but then the text goes behind the menu and can't be seen.

mcdougals4all
10-07-2004, 03:16 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum