2 replies [Last post]
spl1nter
Offline
newbie
Last seen: 17 years 17 weeks ago
Joined: 2004-10-04
Posts: 3
Points: 0

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?

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 13 years 15 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

Help with CSS positioning

it looks fine to me (mozilla firefox 1.0pr & ms ie).. which big space are you referring??

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Help with CSS positioning

spl1nter, the text is flowing around the menu; but I'm afraid that you seem confused about how to use positioning, you have floats with absolute positioning if you were to remove the positionings and negative margins/co-ordinates you would see the menu take up correct position top left corner then with use of margins on the menu you could control the spacing betwen text and menu box. you have floated the main container it would probably be better as static or relative with a further div holding your text then play around with off-setting the menu and also you have declared the rules twice in the stylesheet?
These links may be of help,

http://www.positioniseverything.net/articles/flow-pos.html

http://css.maxdesign.com.au/floatutorial/

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me