SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2004
    Location
    Scotland.
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2004
    Location
    Scotland.
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    #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.
    Code:
    margin-right:5px;
    margin-bottom:5px;
    Hope that helps.

    Paul


Bookmarks

Posting Permissions

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