Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Feb 2004
    Location
    Scotland
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with CSS positioning

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

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

    Code:
    #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;
    }
    Code:
    <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?
    Last edited by spl1nter; 10-04-2004 at 10:28 PM.

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote 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.

  • #3
    Regular Coder
    Join Date
    Feb 2004
    Location
    Scotland
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Feb 2004
    Location
    Scotland
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Got it:

    Code:
    #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;
    }

  • #5
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #6
    Regular Coder
    Join Date
    Feb 2004
    Location
    Scotland
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, but then the text goes behind the menu and can't be seen.

  • #7
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •